HTML5 new attribute, html5 new

HTML5 new attribute, html5 new

I. box-shadow (shadow effect)

Usage:
Box-shadow: 20px 10px 0 #000;
-Moz-box-shadow: 20px 10px 0 #000;
-Webkit-box-shadow: 20px 10px 0 #000;
Supported:
FF3.5, Safari 4, Chrome 3
2. border-colors (set multiple colors for the border)
Usage:
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 FF's private writing method does not support abbreviations:-moz-border-colors: #333 #444 #555;
Supported:
FF3 +
3. boder-image (image Border)
Usage:
-Moz-border-image: url(exam.png) 20 20 20 repeat;
-Webkit-border-image: url(exam.png) 20 20 20 repeat;
Note:
(1). 20 20 20 20 ---> the Border Width corresponds to top, right, bottom, and left borders respectively. Changing the width can achieve different effects;
(2). Border image effect (currently only two effects are achieved ):
Repeat --- border images are tiled, similar to repeated backgrounds;
Stretch-the border image will be stretched to fill the entire border;
(3). The Border thickness of the element must be set to a non-0 non-auto value.
Supported:
FF 3.5, Safari 4, Chrome 3
4. text-shadow)
Usage:
Text-shadow: [<color> Note:
(1) <color> and <blur radius> are optional. When <color> is not specified, the text color is used. When <blur radius> is not specified, the radius is 0;
(2) shadow can be a comma-separated list, for example:
Text-shadow: 2px 2px 2px # ccc, 3px 3px 3px # ddd;
(3) The shadow effect is applied to the elements according to the sequence specified in the shadow list;
(4) These shadow effects may overlap with each other, but the text itself is not superimposed;
(5) The Shadow may run outside the container's boundary, but does not affect the container size.
Supported:
FF 3.5, Opera 10, Safari 4, Chrome 3
5. text-overflow (text truncation)
Usage:
Text-overflow: inherit | ellipsis | clip;
-O-text-overflow: inherit | ellipsis | clip;
Note:
(1) There is also an attribute ellipsis-word, which is not supported by browsers.
Supported:
IE6 +, Safari4, Chrome3, Opera10
6. word-wrap (automatic line feed)
Usage:
Word-wrap: normal | break-word;
Supported:
IE6 +, FF 3.5, Safari 4, Chrome 3
VII. border-radius (rounded border)
Usage:
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
Supported:
FF 3 +, Safari 4, Chrome 3
8. opacity (opacity)
Usage:
Opacity: 0.5;
Filter: alpha (opacity = 50);/* for IE6, 7 */
-Ms-filter (opacity = 50);/* for IE8 */
Supported:
All
9. box-sizing (control the composition mode of the box Model)
Usage:
Box-sizing: content-box | border-box; // for opera
-Moz-box-sizing: content-box | border-box;
-Webkit-box-sizing: content-box | border-box;
Note:
1. content-box:
When this value is used, the composition mode of the box model is: element width = content + padding + border;
2. border-box:
When this value is used, 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 ).
Supported:
FF3 +, Opera 10, Safari 4, Chrome 3

 

From Weizhi note (Wiz)