Home > Developer > JavaScript

CSS3 adds attributes and css3 adds attributes.

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

CSS3 adds attributes and css3 adds attributes.

Many new functions have been added to CSS3, which gives users a better experience. Today I will tell you about the new functions added to CSS3.

1. CSS3 adds many powerful selectors, such:

The CSS3 feature of these rows may be frequently used in our daily development. It solves many problems that we need to use JavaScript scripts to solve before.

Tbody: nth-child (even), tbody: nth-child (odd): Here they represent the even and odd rows (tr) under the table (tbody ), this style is very suitable for tables, so that you can clearly see the differences between rows in the table, so that users can easily browse.

: Not (. textinput): This indicates that all classes are not "textinput" nodes.

Div: fitst-child: the first direct subnode under all div nodes.

2. We recommend some useful new css3 attributes:

Recently, css3 was launched. Although most of the css3 attributes are not supported in many popular browsers, I personally think we should try to get started with learning about and using css3 (and html5 ), because I think this is a trend, it is a standard that has been developed. This is just my personal opinion.

1. Previously I wanted to create a border box with a rounded corner on the page. It seems that I need to write a lot of css code (maybe I have no better solutions ), it is very easy to create a rounded corner with an attribute in css3. You can also create a circle with an angle set.

Border-radius:

　　　　

Css code:

# Test
{
Text-align: center;
Padding: 10px 40px;
Background: gray;
Width: 350px;
Border-radius: 10px;
-Moz-border-radius: 10px;/* To make the old Firefox version support */
}
</Style>

Html code:
<Body>
<Div> example of using border-radius as the rounded corner. </Div>
</Body>

 

2. CSS3 border shadow. Previously, I used images for background effects. The box-shadow attribute in css3 can also be used.

　　　　Box-shadow:

　　　　

　　　Css code:

# Test1
{
Box-shadow: 10px 10px 5px # A5A5A5;
Width: 300px;
Height: 100px;
}

　　　　Html code:

<Body>
<Div> </div>
</Body>

 

3. css3 supports multiple background images

CSS3 multi-background image

　　　　

　　　　. Box
{
Width: 464px;
Height: 300px;
Background: url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</Style>
</Head>
<Body>
<Div> </div>
</Body>

 

　　　　4. The text-overflow attribute specifies what happens when a text overflow contains elements.

　　　　This attribute allows you to disable text in a container. When the text overflows, A ellipsis is provided.

　　　　

　　　　

. Test3 {
Text-overflow: ellipsis;
Overflow: hidden;
White-space: nowrap;
Border: 1px solid black;
Width: 400px;
Padding: 20px;
Cursor: pointer;
}
# Test3: hover {
White-space: normal;
Color: rgba (0, 0, 0, 1 );
Background: # e3e3e3;
Border: 1px solid #666;
}
</Style>
</Head>
<Body>
<Div> when the content shown here overflows, there will be a ellipsis. Moving the cursor over the text will show all the content </div>
</Body> 5. transition effect. With CSS3, we can add effects to elements when elements are transformed from one style to another without Flash animation or JavaScript. The effect is hard to be reflected by textures. If you are interested, run the following code: <Style>
Div
{
Width: 100px;
Height: 100px;
Background: blue;
Transition: width 2 s, height 2 s;
-Moz-transition: width 2 s, height 2 s,-moz-transform 2 s;/* supports Firefox 4 */
-Webkit-transition: width 2 s, height 2 s,-webkit-transform 2 s;/* supports Safari and Chrome */
-O-transition: width 2 s, height 2 s,-o-transform 2 s;/* supports Opera */
}
Div: hover
{
Width: 200px;
Height: 200px;
Transform: rotate (180deg );
-Moz-transform: rotate (180deg);/* supports Firefox 4 */
-Webkit-transform: rotate (180deg);/* supports Safari and Chrome */
-O-transform: rotate (180deg);/* supports Opera */
}
</Style>
</Head>
<Body>
<Div> place the cursor over the area to view the transition effect. </Div>
</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