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设置阴影颜色 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内核的Safari和Chrome支持
例如： -webkit-text-stroke: 3.3px #2A75BF;
4，圆角设置；IE不支持Box Shadow(阴影)，左上、左下、右上、右下四个方向可以分别设置
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
5，webkit内核的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(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
background-image:linear-gradient(left top, red 100px, yellow 200px);
ie下可以使用渐变滤镜，请参阅： 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));
重复的渐变
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);
重复的径向渐变
background:repeating-radial-gradient(black, black5px, white5px, white10px);
网友评论