Home > Others

Introduction to the use of several special attribute tags in html

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the HTML there are a few easy to forget the special attributes tag, here is a detailed description of these attributes in the use of various browsers, in order to achieve better compatibility, suggest that the Web people take time to see

The following properties are not good for browser compatibility.

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.box-shadow property to add one or more shadows to the box
5.text-shadow property to set Shadow to text
6.transition

for better compatibility with individual browsers, prefix is required.
-o-/*opera Browser/
-webkit-/*webkit Kernel browser Safari and chrome*/
-ms-/*ie 9*/
-moz-/*firefox Browser * *
1.transform:rotate (45deg)
rotates the object by Transform property, 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
where you can choose to add a corner 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 a rounded border to an element, just as you can control where you want to add a rounded border, as with Border-radius.

the 3.box-shadow property adds one or more shadows to the box, Text-shadow the property to the text
Box-shadow:h-shadow | | v-shadow | | Spread | | Color | | inset;
Properties: Position of horizontal Shadow | | Vertical Shadow Position | | Blur Distance | | Shadow Color | | Change external 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
Specify the name of the CSS attribute that sets the transition effect | | Specify how many seconds or milliseconds to complete the transition effect | | Speed curve with specified speed effect | | Defines when a transition effect starts

The Transition property is not currently supported by all browsers.
Ease default. The animation starts at a low speed and then speeds up and slows down before it ends. The
Ease-in animation starts at a low speed.
Ease-out animation ends at low speed
Ease-in-out animation starts and ends at low speed

Transition:background 5s ease;

One EG:

Copy Code code 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> Comments:</b> This example is not valid in Internet Explorer. </p>


</body>


</html>


Two EG:

Copy Code code as follows:


<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>
<body>
<div></div>
<p> move the mouse pointer over the blue DIV element to see the transition effect. </p>
<p><b> Note:</b> This example is not valid in Internet Explorer. </p>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More