Introduction to the use of several special attribute tags in HTML_HTML/Xhtml_Web page production

The following attributes are not very compatible with browsers.

1.transform:rotate(45deg)
2.border-top-left-radius This attribute allows you to add a rounded border to an element
3.border-radius This property allows you to add a rounded border to an element
4.box-shadow property adds one or more shadows to the box
5.text-shadow property sets a shadow to the text
6.transition

In order to be better compatible with various browsers, a prefix needs to be added.
-o- /*Opera browser*/
-webkit- /*Webkit kernel browser Safari and chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/

1.transform:rotate(45deg)
Rotate the object through the transform attribute, where (45deg) is the angle of rotation

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*/

2.border-top-left-radius border-radius This property allows you to add a rounded border to an element
former You can choose where to add a rounded border
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
border-top-left -radius This attribute allows you to add a rounded border to an element. It is the same as border-radius, but you can control where the rounded border needs to be added.

3. The box-shadow attribute adds a or Multiple shadows, text-shadow attribute sets shadow to text
box-shadow: h-shadow || v-shadow || blur || spread || color || inset;
attribute: horizontal shadow position|| vertical shadow position|| blur distance|| shadow size|| shadow color|| Change outer shadow (outset) to inner shadow
box-shadow:1px 1px 3px #292929;

text-shadow: h-shadow || v-shadow || blur || color;
text-shadow: 0px -1px 0px #000;

4.transition
property || duration || timing-function || delay
Specifies the name of the CSS property 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 the transition effect When to start

Currently all browsers do not support the transition attribute.
ease default. The animation starts at a low speed, then speeds up, and slows down before ending.
ease-in animation starts at a low speed.
ease-out animation ends at a low speed
ease-in-out animation starts and ends at a low speed

transition:background 5s ease;

ONE EG:

Copy code

Code As follows:

Please move the mouse pointer to the blue div element to see to the transition effect.

Note: This example does not work in Internet Explorer.

TWO EG:

Copy code

The code is as follows:

< div>

Please move the mouse pointer to the blue div element to see the transition effect.

Note: This example does not work in Internet Explorer.