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
Detailed process of installing the docker plugin in IntelliJ IDEA (2018 version)
Table of contents 1. Development Environment 2. I...
Detailed example of using typescript to encapsulate axios in Vue3
This axios package is used in the vue3 demo. For ...
The most comprehensive collection of front-end interview questions
HTML+CSS 1. Understanding and knowledge of WEB st...
How to build php-nginx-alpine image from scratch in Docker
Although I have run some projects in Docker envir...
Vue commonly used high-order functions and comprehensive examples
1. Commonly used high-order functions of arrays S...
Comparison of the usage of EXISTS and IN in MySQL
1. Usage: (1) EXISTS usage select a.batchName,a.p...
Understanding flex-grow, flex-shrink, flex-basis and nine-grid layout
1. flex-grow, flex-shrink, flex-basis properties ...
Perfect solution to the problem of data being truncated when using the group concat function in Mysql5.7
The day before yesterday, I encountered a problem...
Linux command line operation Baidu cloud upload and download files
Table of contents 0. Background 1. Installation 2...
Bootstrap 3.0 study notes CSS related supplement
The main contents of this article are as follows:...
How to use crontab to add scheduled tasks in Linux
Preface The Linux system is controlled by the sys...
Detailed explanation of the difference between JavaScript onclick and click
Table of contents Why is addEventListener needed?...
js detects keywords in the title and description and replaces or jumps to other pages when found
Keywords General The title cannot contain words l...
Detailed explanation of props and context parameters of SetUp function in Vue3
1. The first parameter props of the setUp functio...
Detailed example of using CSS to beautify HTML form controls (form beautification)
1. Basic syntax structure of HTML submit and bott...