There are several special attribute tags that are easy to forget in HTML. The following describes the usage of these attributes in various browsers in detail, in order to achieve better compatibility, it is recommended that web engineers take the time to check the following attributes for poor browser compatibility.
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 attribute allows you to add a rounded border to an element.
4. Add one or more shadows to the box by using the box-shadow attribute.
5. Set the shadow attribute to the text.
6. transition
To better be compatible with various browsers, you need to add a prefix.
-O-/* operabrowser */
-Webkit-/* Webkit kernel browser Safari and chrome */
-Ms-/* IE 9 */
-Moz-/* Firefox */
1. transform: rotate (45deg)
Rotate an object using the transform attribute, where (45deg) is the Rotation Angle
Transform: rotate (45deg );
-Ms-transform: rotate (45deg);/* IE 9 */
-O-transform: rotate (45deg);/* operabrowser */
-Webkit-transform: rotate (45deg);/* Webkit kernel browser Safari and chrome */
-Moz-transform: rotate (45deg);/* Firefox */
2. border-top-left-radius border-radius this attribute allows you to add a rounded border to an element.
The former allows you to select the position of the 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 it only controls the position of the border to be added to a rounded corner.
3. The box-shadow attribute adds one or more shadows to the box, and the text-shadow attribute sets shadows to the text.
Box-shadow: h-shadow | v-shadow | blur | spread | color | inset;
Attribute: horizontal shadow position | vertical shadow position | fuzzy distance | shadow size | shadow color | change the external shadow (outset) to the internal 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 attribute for setting the transition effect. | specifies the number of seconds or milliseconds required for completing the transition effect. | specifies the speed curve of the transition effect. | defines when the transition effect starts.
Currently, all browsers do not support the transition attribute.
Default. The animation starts at low speed, then accelerates, and slows down before the end.
The Animated-in animation starts at low speed.
The seek-out animation ends at low speed.
The Animated-in-out animation starts and ends at low speed.
Transition: background 5S identifier;
One eg:
The Code is as follows:
Move the mouse pointer to the blue p element to see the transition effect.
Note:This example is invalid in Internet Explorer.
Two eg:
The Code is as follows:
Move the mouse pointer to the blue p element to see the transition effect.
Note:This example is invalid in Internet Explorer.
