Introduction to the use of several special HTML attribute tags

The following attributes are not good for browser compatibility.

1.transform:rotate(45deg)

2.border-top-left-radius This property allows you to add rounded borders to elements

3.border-radius This property allows you to add rounded borders to elements

4. The box-shadow property adds one or more shadows to the box

5. The text-shadow property sets a shadow to the text

6.transition

In order to be better compatible with each browser, prefixes are required.

-o- /*Opera browser*/

-webkit- /*Webkit kernel browser Safari and chrome*/

-ms- /*IE 9*/

-moz- /*Firefox browser*/

The object is rotated through the transform property, where (45deg) is the rotation angle

transform:rotate(45deg);

-ms-transform:rotate(45deg); /*IE 9*/

-o-transform:rotate(45deg); /*Opera browser*/

-webkit-transform:rotate(45deg); /*Webkit kernel browser Safari and chrome*/

-moz-transform:rotate(45deg); /*Firefox browser*/

The former can choose the position where the rounded border is added

border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, border-bottom-right-radius

border-top-left-radius This property allows you to add rounded borders to elements, just like border-radius, just to control where the rounded borders need to be added.

box-shadow: h-shadow || v-shadow || blur || spread || color || inset;

Properties: Position of horizontal shadow|| Position of vertical shadow|| Blur distance|| Shadow size|| Shadow color|| Change the outer shadow (outset) to the inner shadow

box-shadow:1px 1px 3px #292929;

text-shadow: h-shadow || v-shadow || blur || color;

text-shadow: 0px -1px 0px #000;

property || duration || timing-function || delay

Specifies the name of the CSS attribute that sets the transition effect|| Specifies how many seconds or milliseconds it takes to complete the transition effect|| Specifies the speed curve of the speed effect|| Defines when the transition effect starts

Currently, all browsers do not support the transition attribute.

ease default. The animation starts at a low speed, then speeds up, slowing down before it ends.

The ease-in animation starts at a low speed.

ease-out animation ends at low speed

ease-in-out animation starts and ends at low speed

transition:background 5s ease;

ONE EG:

Copy the code