Introduction to the use of several special attribute tags in HTML_HTML/Xhtml

Home

Web Front-end

HTML Tutorial

Introduction to the use of several special attribute tags in HTML_HTML/Xhtml_Web page production

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

html

The following attributes are not very compatible with browsers.

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 property allows you to add a rounded border to an element
4.box-shadow property adds one or more shadows to the box
5.text-shadow property sets a shadow to the text
6.transition

In order to be better compatible with various browsers, a prefix needs to be added.
-o- /*Opera browser*/
-webkit- /*Webkit kernel browser Safari and chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/

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 property allows you to add a rounded border to an element
former You can choose where to add a 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 you can control where the rounded border needs to be added.

3. The box-shadow attribute adds a or Multiple shadows, text-shadow attribute sets shadow to text
box-shadow: h-shadow || v-shadow || blur || spread || color || inset;
attribute: 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 how many seconds or milliseconds it takes to complete the transition effect|| Specifies the speed curve of the speed effect|| Defines the transition effect When to start

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

transition:background 5s ease;

ONE EG:

Copy code

Code As follows:

Please move the mouse pointer to the blue div element to see to the transition effect.

Note: This example does not work in Internet Explorer.

TWO EG:

Copy code

The code is as follows:

< div>

Please move the mouse pointer to the blue div element to see the transition effect.

Note: This example does not work in Internet Explorer.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn