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)
Recommend
How to limit the number of records in a table in MySQL
Table of contents 1. Trigger Solution 2. Partitio...
Let's talk about the size and length limits of various objects in MySQL
Table of contents Identifier length limit Length ...
Sample code for implementing horizontal infinite scrolling with pure CSS3
The examples in this article are all written in s...
Basic implementation method of cross-component binding using v-model in Vue
Hello everyone, today we will talk about how to u...
MySQL statement execution order and writing order example analysis
The complete syntax of the select statement is: S...
Vue simple implementation of turntable lottery
This article shares the specific code of Vue to s...
When to use table and when to use CSS (experience sharing)
The main text page of TW used to have a width of 8...
Vue project implements left swipe delete function (complete code)
Achieve results The code is as follows html <t...
HTML+CSS+JavaScript realizes the display of selected effect following the mouse movement
1. Display effect: 2, html structure <div clas...
Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)
1. Flash plug-in package download address: https:...
Examples of common Nginx misconfigurations
Table of contents Missing root location Off-By-Sl...
Detailed explanation of JS browser storage
Table of contents introduction Cookie What are Co...
How to deploy SSL certificate in windows apache environment to make the website support https
I won’t talk about the use of SSL certificates. F...
Detailed explanation of the difference between IE8 compatibility view (IE7 mode) and standalone IE7
one. Overview of IE8 Compatibility View <br /&...
How to build Apr module for tomcat performance optimization
Preface Tomcat is a widely used Java web containe...