CSS之box-shadow属性

html-css013

CSS之box-shadow属性,第1张

CSS box-shadow 属性用于在元素的框架上添加阴影效果。

当给出两个、三个或四个 <length> 值时:

你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。 阴影绘制由最后一个开始 , 故第一个设置的阴影将覆盖在后设置的阴影之上。

利用此特性可以给上下左右边框设置不同样式的阴影效果:

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow : none | <length>none | [<shadow>, ] * <shadow>或none | <color>[, <color>]*

也就是:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...

或者

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)].

例子:

.demo {background: #666666width: 440pxpadding: 30pxfont: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sanscolor: #ffftext-transform: uppercase}

-moz-, -webkit-, -o-这些都是浏览器前缀。box-shadow才是css样式。

通过js获取css的box-shadow的方法:

div

{

box-shadow: 10px 10px 5px #888888

}

js方法:

document.div[0].style.box-shadow = "12px 11px 5px #888888"

常用前缀和浏览器的对应关系如下:

Firefox: -moz-

Chrome, Safari: -webkit-

Opera: -o-

IE: -ms-

css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程,css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,同时也会出现有的浏览器厂商支持的好,有的支持的不好,所以就用厂商前缀加以区分。

PPK建议如果已成为REC或接近REC的属性,厂商如果完全实现了w3c的test case,就不用加厂商前缀,像border-radius在ie9下就不用加前缀。