1癞蚕，向框添加一個或多個陰影
box-shadow: 10px 10px 5px #888888;
語法
box-shadow:h-shadowv-shadowblurspreadcolorinset;
????????-webkit-text-shadow:0 0 10px #c06;
? ? ? ? ?? -moz-text-shadow:0 0 10px #C06;
?????????????? -o-text-shadow:0 0 10px #C06;
?????????? ? ? ? ?? text-shadow:0 0 10px #c06;
??????? filter: Shadow(Color='green', Direction='135', Strength='6')/*Color設(shè)置陰影顏色? Direction陰影的方向订咸，取值為0即零度（表示向上方向）愁憔，45為右上处嫌，90為右而涉，135為右下，180為下方瞳秽，225為左下方瓣履，270為左方，315為左上方练俐； ? Strength就是 范圍袖迎，類似于text-shadow中的模糊半徑值*/
/*? filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true'); ?? */?
多陰影----加邊例子（逗號隔開） ：
.kind1{ text-shadow: 0px 0px 2px green,
0px 0px 3px blue,
0px 0px 4px red;
font-size:38px; color:yellow; }
類似于火焰? ?
?? ? ? ?? .fire{ font-size:40px; font-weight:bold;? background:#000; text-align:center; padding:24px;? ?
??????????? ? text-shadow:0 0 4px white,?? ?
??????????????????????? ? ? ? ? 0 -5px 4px #ff3,? ?
??????????????????????????????? 3px -10px 6px #fd3,?? ?
??????????????????????????????? -3px -15px 11px #C90,? ?
??????????????????????????????? 3px -25px 18px #f20;
?? ??? ??? ??? ??? ??? ? /* 4px -35px 28px #C30;*/
???? }
3D
.threeD{ color:#fff;? text-shadow: 0 0 1px #999,?
1px 1px 2px #888,?
2px 2px 2px #777,?
3px 3px 2px #666,?
4px 4px 2px #555,?
5px 5px 2px #333;
}
3，Text Stroke(文本描邊)和text-fill-color(文本填充色)??這兩個屬性只有webkit內(nèi)核的Safari和Chrome支持
例如： -webkit-text-stroke: 3.3px #2A75BF;
4，圓角設(shè)置燕锥；IE不支持Box Shadow(陰影)辜贵，左上、左下归形、右上托慨、右下四個方向可以分別設(shè)置
-moz-border-radius:2em;?
-webkit-border-radius:2em;?
border-radius:2em;
5，webkit內(nèi)核的safari连霉、 Chrome的Linear Gradients (線性漸變)?
-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600))榴芳；
-moz-linear-gradient(0% 0% 270deg, #999999,#333333, #336600 50%)；
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結(jié)束顏色值), [color-stop(偏移量小數(shù),投搴常靠顏色值),...] );
background-image:linear-gradient(left top, red 100px, yellow 200px);
ie下可以使用漸變?yōu)V鏡窟感，請參閱：?http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
6，徑向漸變?radial-gradient
background:radial-gradient(red, yellow,rgb(30,144,255));
重復(fù)的漸變
background:repeating-linear-gradient(-45deg, red, red5px, white5px, white10px);
background-color:#000;background-image:repeating-linear-gradient(90deg, transparent, transparent50px,rgba(255,127,0,0.25)50px,rgba(255,127,0,0.25)56px, transparent56px, transparent63px,rgba(255,127,0,0.25)63px,rgba(255,127,0,0.25)69px, transparent69px, transparent116px,rgba(255,206,0,0.25)116px,rgba(255,206,0,0.25)166px),repeating-linear-gradient(0deg, transparent, transparent50px,rgba(255,127,0,0.25)50px,rgba(255,127,0,0.25)56px, transparent56px, transparent63px,rgba(255,127,0,0.25)63px,rgba(255,127,0,0.25)69px, transparent69px, transparent116px,rgba(255,206,0,0.25)116px,rgba(255,206,0,0.25)166px),repeating-linear-gradient(-45deg, transparent, transparent5px,rgba(143,77,63,0.25)5px,rgba(143,77,63,0.25)10px),repeating-linear-gradient(45deg, transparent, transparent5px,rgba(143,77,63,0.25)5px,rgba(143,77,63,0.25)10px);
重復(fù)的徑向漸變
background:repeating-radial-gradient(black, black5px, white5px, white10px);
