HTML5 new attributes

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 FF’s private writing method does not support abbreviations: -moz-border-colors: #333 #444 #555;
Support:
FF3+
Three. boder-image (picture border)
Use :
-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 repetition;
stretch --- The border image will be stretched to cover the entire border;
(3). The border thickness of the element must be set to a non-zero non-auto value .
Support:
FF 3.5, Safari 4, Chrome 3
Four. text-shadow (text shadow)
Use:
text-shadow: [] || [];
Instructions:
(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) Shadow effects will be applied to elements in the order specified in the shadow list;
(4) These shadow effects may overlap each other, but will not overlap text itself;
(5) The shadow may run outside the bounds of the container, but will not affect the size of the container.
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;
Explanation:
(1) There is also an attribute ellipsis-word, but all browsers do not support it .
Support:
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
7. 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