CSS3 What new properties are added

I. Box-shadow (shadow effect)
Use:
box-shadow:20px 10px 0 #000;
-moz-box-shadow:20px 10px 0 #000;
-webkit-box-shadow:20px 10px 0 #000;
Support:
FF3.5, Safari 4, Chrome 3
Two. Border-colors (set multiple colors for borders)
Use:
border:10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
Description
The number of color values is not fixed, and the private notation of FF does not support abbreviations:-moz-border-colors: #333 #444 #555;
Support:
ff3+
Three. Boder-image (picture border)
Use:
-moz-border-image:url (exam.png), repeat;
-webkit-border-image:url (exam.png), repeat;
Description
(1). The width of the---> frame, respectively, corresponding to top, right, bottom, the left border, change the width can achieve different effects;
(2). Border picture effect (currently only two types are implemented):
Repeat---Border picture will be tiled, similar to the background repetition;
Stretch---Border picture will be stretched to fill the entire frame;
(3). The border thickness of the element must be set to a non-0 non-auto value.
Support:
FF 3.5, Safari 4, Chrome 3
Four. Text-shadow (Text shadow)
Use:
Text-shadow: [< color >< horizontal offset >< Vertical offset >< blur radius;] | | [< Horizontal offset >< Vertical offset >< blur radius >< color >];
Description
(1) < color > and < blur radius > is optional, when < color > is not specified, the text color will be used; When < blur radius > is not specified, the RADIUS value is 0;
(2) Shadow can be a comma-delimited list, such as:
text-shadow:2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) The shadow effect is applied to the element in the order specified in the shadow list;
(4) These shadow effects may overlap each other, but do not overlay the text itself;
(5) Shadows may run outside the boundaries of the container, but do not affect the size of the container.
Support:
FF 3.5, Opera, Safari 4, Chrome 3
Five. Text-overflow (text truncation)
Use:
Text-overflow:inherit | ellipsis | Clip;
-o-text-overflow:inherit | ellipsis | Clip
Description
(1) There is also an attribute Ellipsis-word, but not supported by browsers.
Support:
ie6+, Safari4, Chrome3, Opera10
Six. Word-wrap (auto-wrap)
Use:
Word-wrap:normal | Break-word;
Support:
ie6+, FF 3.5, Safari 4, Chrome 3
Seven. Border-radius (rounded border)
Use:
-moz-border-radius:5px;
-webkit-border-radius:5px;
Support:
FF, Safari 4, Chrome 3

Eight. Opacity (opacity)
Use:
opacity:0.5;
Filter:alpha (OPACITY=50); /* for IE6, 7 */
-ms-filter (OPACITY=50); /* for IE8 */
Support:
All
Nine. Box-sizing (composition mode of the control box model)
Use:
Box-sizing:content-box | Border-box; For opera
-moz-box-sizing:content-box | Border-box;
-webkit-box-sizing:content-box | Border-box;
Description
1. Content-box:
When using this value, the composition pattern of the box model is the element width = content + padding + border;
2. Border-box:
With this value, the composition pattern of the box model is that the element width = content (even if the padding and border are set, the width of the element
will not change).
Support:
ff3+, Opera, Safari 4, Chrome 3

CSS3 What new properties are added