CSS3 New Attributes Simple Summary (1)

Source: Internet
Author: User

First, Border 1.border-radius

A shorthand notation:

Div {Border:2px solid #a1a1a1; Border-radius:25px; /* ie9+, firefox4+, Chrome, safari5+, Opera */ -moz-border-radius:25px/**/}

Values: px, EM,%

Multiple ways:

/*border-radius:25px is equivalent to*/border-top-left-radius:25px;border-top-right-radius:25px;border-bottom-right-radius:25px; border-bottom-left-radius:25px;/*start clockwise from Top-left*/border-radius:25px 0px 25px 0px/*equivalent to*/border-radius:25px 0px/*Irregular rounded corners*/border-radius:2em 1em 4em/0.5em 3em;/*equivalent to*/border-top-left-radius:2em 0.5em;border-top-right-radius:1em 3em;border-bottom-right-radius:4em 0.5em; Border-bottom-left-radius:1em 3em;
2.box-shadow

A shorthand notation:

/*ie9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 support Box-shadow properties. */
Div{ box-shadow: 10px 10px 5px #888888;}

Grammar:

Box-shadow:h-shadow v-shadow blur spread color inset; /* H-shadow    required. The position of the horizontal shadow, allowing negative values. V-shadow    required. The position of the vertical shadow, allowing negative values.    Blur        is optional. Blur distance. Spread      is optional. The size of the shadow.    color       is optional. The color of the shadow. Inset       is optional. Changes the outer shadow (outset) to an inner shadow. */
3.box-image

A shorthand notation:

Div {-webkit-border-image:url (border.png)-round*/**- O-border-image:url (border.png): round/** */border-image URL (border.png) round; /* Internet Explorer One, Firefox, Opera, Chrome, Safari 6 */}

Full attributes:

    • Border-image-source Picture Path
    • Border-image-slice Picture Border Inward offset
    • Border-image-width Picture Border Width
    • Border-image-outset border picture area exceeds the amount of border
    • Border-image-repeat repeated tiled, stretched stretched, rounded covered
Second, background 1.background-size

A shorthand notation:

/* ie9+, Firefox 4+, Opera, Chrome, and Safari 5+ */ Div {background:url (bg_flower.gif); -moz-background-size:63px 100px/**/background-size: 63px 100px; background-repeat:no-repeat;}

Values: px, EM,%, cover, contain

2.background-origin

A shorthand notation:

/* ie9+, Firefox 4+, Opera, Chrome, and Safari 5+.  */div{background-image:url (' smiley.gif ');  Background-repeat:no-repeat; background-position:left; background-origin:content-box;}

Values: Content-box, Padding-box, Border-box;

The Background-origin property specifies where the Background-position property is positioned relative to.

If the Background-attachment property of the background image is "fixed", the property has no effect

3.background-clip

A shorthand notation:

/**/div{background-color:yellow;  Background-clip:content-box;}

Values: Content-box, Padding-box, Border-box;

Third, the text effect 1.text-shadow
/* Internet Explorer + + and more */ /* Text-shadow:h-shadow v-shadow blur color; */ H1 {Text-shadow: 5px 5px 5px #FF0000;}
2.text-overflow
div.test {Text-overflow:ellipsis;}

Value: Clip, ellipsis, string

3.word-break
/* Opera does not support */  {word-break:hyphenate;}

Values: Normal, Break-all, Keep-all

4.word-wrap
{word-wrap:break-word;}

Value: Normal, Break-word (line wrapping within a long word or URL address)

CSS3 New Attributes Simple Summary (1)

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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