CSS3 New Attributes Simple Summary (1)

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)