How to use some special attribute tags in HTML

Time:2020-12-5

The following properties are not good for 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 rounded borders to elements
4. Box shadow attribute adds one or more shadows to the box
5. Text shadow attribute sets shadow to text
6.transition

In order to be more compatible with each browser, we need to add prefix
-O – / * opera browser*/
-WebKit – / * WebKit kernel browser Safari and chrome*/
-ms- /*IE 9*/
-Moz – / * Firefox browser*/

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 attribute allows you to add a rounded border to an element
The former can choose where to add 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, just like border radius, but you can control where you want to add a rounded border

3. The box shadow attribute adds one or more shadows to the box, and the text shadow property sets the shadow to the text
box-shadow: h-shadow || v-shadow || blur || spread || color || inset;
Attributes: position of horizontal shadow | position of vertical shadow | blur distance | shadow size | shadow color | change the outer shadow (outer) 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 when the transition effect starts

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

transition:background 5s ease;

ONE EG:

Copy code

The code is as follows:

<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>Please move the mouse pointer over the blue div element to see the transition effect. </p>
<p><b>Note: < / b > this example does not work in Internet Explorer. </p>
</body>
</html>

TWO EG:

Copy code

The code is as follows:

<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition-property:background;
transition-duration:5s;
/* Firefox 4 */
-moz-transition-property:background;
-moz-transition-duration:5s;
/* Safari and Chrome
-webkit-transition-property:background;
-webkit-transition-duration:5s;*/
transition:background 5s ease;
/* Opera */
-o-transition-property:background;
-o-transition-duration:5s;
}
div:hover
{
background:red;
}
</style>
</head>
<body>
<div></div>
<p>Please move the mouse pointer over the blue div element to see the transition effect. </p>
<p><b>Note: < / b > this example does not work in Internet Explorer. </p>
</body>
</html>