Introduction to the use of several special attribute tags in HTML

Introduction to the use of several special attribute tags in HTML
The following attributes are not very compatible with browsers.

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

In order to better compatibility with various browsers, a prefix is ​​required.
-o- /*Opera browser*/
-webkit- /*Webkit-based browsers Safari and Chrome*/
-ms- /*IE 9*/
-moz- /*Firefox browser*/

1.transform:rotate(45deg)
Use the transform property to rotate the object, 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-based browsers Safari and Chrome*/
-moz-transform:rotate(45deg); /*Firefox browser*/

2.border-top-left-radius border-radius This property allows you to add rounded borders to an element <br />The former allows you to 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 property allows you to add rounded borders 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 property adds one or more shadows to the box, and the text-shadow property sets a shadow to the text
box-shadow: h-shadow || v-shadow || blur || spread || color || inset;
Properties: 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 the number of seconds or milliseconds that the transition effect takes to complete|| Specifies the speed curve of the speed effect|| Defines when the transition effect starts

The transition property is not currently supported by all browsers.
ease The default. The animation starts slow, then speeds up, then slows down before ending.
ease-in The animation starts at a slow speed.
ease-out animation ends at a slow speed
ease-in-out animation starts and ends at a slow 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 your 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 your 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>

<<:  CSS XTHML writing standards and common problems summary (page optimization)

>>:  How to run MySQL in Docker environment and enable Binlog to configure master-slave synchronization

Recommend

CSS3 filter code to achieve gray or black mode on web pages

front end css3,filter can not only achieve the gr...

Detailed Tutorial on Using xargs Command on Linux

Hello everyone, I am Liang Xu. When using Linux, ...

Three ways to refresh iframe

Copy code The code is as follows: <iframe src=...

Does the % in the newly created MySQL user include localhost?

Normal explanation % means any client can connect...

Analysis of MySQL joint index function and usage examples

This article uses examples to illustrate the func...

How to monitor mysql using zabbix

Zabbix deployment documentation After zabbix is ​...

How MySQL Select Statement is Executed

How is the MySQL Select statement executed? I rec...

Using vue3 to imitate the side message prompt effect of Apple system

Table of contents Animation Preview Other UI Libr...

Detailed explanation of custom events of Vue components

Table of contents Summarize <template> <...

js realizes the dynamic loading of data by waterfall flow bottoming out

This article shares with you the specific code of...

Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster

Keepalived+Nginx+Tomcat to achieve high availabil...

MySQL horizontal and vertical table conversion operation implementation method

This article uses examples to illustrate how to i...

Summary of the three stages of visual designer growth

Many people have read this book: "Grow as a ...