New attributes in css3 (reprinted)

Written in front:

Since the CSS5 standard has not yet been fully finalized, browsers of various cores have their own standards. In order not to confuse attributes, each browser adds a prefix to their own standards,

For example: -moz- Mainly firefox

-webikt-mainly chrome google,

-o- Mainly used for browsers on Macs

1. 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
2. border-colors (set multiple colors for the border)
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;
Note:
The number of color values ​​is not fixed, and the private writing method of FF does not support abbreviations: -moz-border-colors: #333 #444 #555;
Support:
FF3+
Three. boder-image (picture border )
Usage:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
Description:
( 1). 20 20 20 20 ---> The width of the border corresponds to the top, right, bottom, and left borders respectively. Changing the width can achieve different effects;
(2). Border picture effects (currently only two types are implemented) ):
repeat --- the border image will be tiled, similar to the background repeat;
stretch --- the border image will be stretched to cover the entire border;
(3). The border thickness of the element must be set to Non-zero non-auto value.
Supported:
FF 3.5, Safari 4, Chrome 3
Four. text-shadow (text shadow)
Use:
text-shadow: [] || [];
Description:
( 1) and are optional. When is not specified, the text color will be used; when is not specified, the radius value is 0;
(2) shadow can be a comma-separated list, such as:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) The shadow effect will be applied to the elements in the order specified in the shadow list;
(4) These shadow effects may overlap each other, but will not overlap the text itself;
(5) The shadow may run outside the boundaries of the container, but will not affect the size of the container.
Support:
FF 3.5, Opera 10, Safari 4, Chrome 3
5. text-overflow (text truncation)
Use:
text-overflow: inherit | ellipsis | clip;
-o-text-overflow: inherit | ellipsis | clip;
Instructions:
(1) There is also an attribute ellipsis-word, but all browsers do not support it.
Supported:
IE6+, Safari4, Chrome3, Opera10
6. word-wrap (automatic line wrapping)
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 3+, Safari 4, Chrome 3


8. opacity (opacity)
Use:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
Support:
all
9. box-sizing (control box model composition mode)
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 mode of the box model is, element width = content + padding + border;
2. border-box:
When using this value, the composition mode of the box model is, Element width = content (even if padding and border are set, the width of the element will not change).
Support:
FF3+, Opera 10, Safari 4, Chrome 3