使用-moz-box-shadow渲染阴影

jackchen 设计创意 2009-10-10

2.46K 0 0

在Firefox 3.5中实现的CSS特性中还有一个很有意思的──盒子阴影。这个特性允许在任何支持盒子模型的元素上投射出“阴影”效果。

由于CSS3的盒子阴影属性目前还在发展中，所以Firefox特化的把他实现为-moz-box-shadow。这种特化方式是Firefox实现CSS中的实验属性的方法之一，在属性前面加上前缀“-moz-”。等到这个属性最终被CSS3确定之后，属性会重新命名为“box-shadow”。

怎么来用呢

为元素添加盒子阴影效果非常直观。CSS3标准中允许的取值为：


none | <shadow> [ <shadow> ]*
</shadow></shadow>

这里<shadow></shadow>被定义为：


<shadow> = inset? &amp;&amp; [ <length>{2,4} &amp;&amp; <color>? ]
</color></length></shadow>

前面两个length长度取值对应着影子在水平和竖直方向的位移。第三个length长度取值是模糊半径（还记得之前介绍过的text-shadow 属性吗，里面也有模糊半径）。最后第四个length长度取值是传播半径，使用正数表示影子拉长，使用负数表示影子缩短，而这个长度是相对于父元素的大小而言的。

inset（嵌入）关键字用标准里面的话来说就是：

如果出现，他把向外投射的阴影（把盒子投射到画布上的阴影，可以理解为从画布上把盒子提起来）改变为向内投射的阴影（把画布投射到盒子上的阴影，可以理解为把盒子从画布上切下来然后移到画布后面）。

让我们来看看实战的例子。

简单画一个阴影，主需要定义好位移和颜色：


-moz-box-shadow: 1px 1px 10px #00f;

simple box shadow

（文中的每个例子我们都会先给出一个实际运行代码的效果，接着一个在Mac OSX上的Firefox 3.5的渲染截图。）

同样，您可以使用前面提到的关键字画一个嵌入的阴影。


-moz-box-shadow: inset 1px 1px 10px #888;

inset box shadow

借助传播半径的力量，您还可以定义相对于应用元素的更小（或者更大）的阴影：


-moz-box-shadow: 0px 20px 10px -10px #888;

box shadow with spread radius

如果你需要，你还可以定义多个阴影，使用逗号隔开（例子来自Markus Stange）：


-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

multiple box shadows

不同的阴影效果非常柔和的融合在一起，您也可能注意到，他们的定义顺序不同产生的效果也不同。因为box-shadow是CSS3的特性，而Firefox 3.5遵循的是CSS3的绘画顺序。也就是说，最先定义的影子显示在顶端，所以在设计多阴影的时候需要注意这一点。

最后，我们来看一个例子，使用-moz-box-shadow和RGBA颜色定义。RGBA同RGB相同，不过他添加了一个附加值标示透明度的Alpha通道。让我们在黄色的背景上做一个黑色的拥有50%透明的模糊阴影：


-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

box shadow with RGBA

您可以看到，黄色的背景可以透过半透明阴影看到。这个特性在使用背景图片时会更加有趣，因为你可以透过阴影看到图片内容。

跨浏览器兼容性

作为全新的正在工作进程中的CSS3属性，box-shadow还没有被浏览器制造商广泛接受。

Firefox 3.5通过-moz-box-shadow特化来支持这个属性，包括多阴影、inset关键字和传播半径。
Safari/WebKit跟Firefox实现方式类似，通过-webkit-box-shadow特化来支持阴影。多阴影从4.0版本开始支持，但是还不支持inset关键字和传播半径。
最后，Opera和微软IE浏览器还没有实现盒子阴影属性，但是在IE浏览器，您可以试着使用他们私有的DropShadow过滤器。

为了获得最大程度的支持，我们建议您定义全部三个属性，包括-moz、-webkit和标准的CSS3词法。相应的浏览器会选择相应的属性进行实现。例如：


-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;

好消息是box-shadow属性在不支持的浏览器上会优雅的降级。例如，上面所有的例子在微软IE浏览器上看起来都是平淡无奇的盒子而没有任何阴影效果。

结论

CSS3的box-shadow属性还没有在浏览器中被广泛支持（用户也是），这跟text-shadow属性类似，但是随着WebKit和Firefox 3.5对盒子阴影的支持，越来越多的用户可以看到这种CSS阴影效果。作为网页开发人员，您可以使用这个特性，能够给用户提供一个全新的现代浏览器体验。

更多资源

文档

例子