10

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

由于CSS3的盒子阴影属性目前还在发展中,所以Firefox特化的把他实现为

1
-moz-box-shadow

。这种特化方式是Firefox实现CSS中的实验属性的方法之一,在属性前面加上前缀“-moz-”。等到这个属性最终被CSS3确定之后,属性会重新命名为“box-shadow”。

怎么来用呢

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


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

这里

1
<shadow></shadow>

被定义为:


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

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

1
inset

(嵌入)关键字用标准里面的话来说就是:

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

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

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


1
-moz-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">10px</span> <span style="color: #cc00cc;">#00f</span><span style="color: #00aa00;">;</span>


simple box shadow

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

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


1
-moz-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">inset</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">10px</span> <span style="color: #cc00cc;">#888</span><span style="color: #00aa00;">;</span>


inset box shadow

借助传播半径的力量,您还可以定义相对于应用元素的更小(或者更大)的阴影:


1
-moz-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">0px</span> <span style="color: #993333;">20px</span> <span style="color: #993333;">10px</span> <span style="color: #993333;">-10px</span> <span style="color: #cc00cc;">#888</span><span style="color: #00aa00;">;</span>


box shadow with spread radius

如果你需要,你还可以定义多个阴影,使用逗号隔开(例子来自Markus Stange):


1
-moz-box-shadow<span style="color: #00aa00;">:</span> 0 0 <span style="color: #993333;">20px</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00aa00;">,</span> <span style="color: #993333;">20px</span> <span style="color: #993333;">15px</span> <span style="color: #993333;">30px</span> <span style="color: #993333;">yellow</span><span style="color: #00aa00;">,</span> <span style="color: #993333;">-20px</span> <span style="color: #993333;">15px</span> <span style="color: #993333;">30px</span> <span style="color: #993333;">lime</span><span style="color: #00aa00;">,</span> <span style="color: #993333;">-20px</span> <span style="color: #993333;">-15px</span> <span style="color: #993333;">30px</span> <span style="color: #000000; font-weight: bold;">blue</span><span style="color: #00aa00;">,</span> <span style="color: #993333;">20px</span> <span style="color: #993333;">-15px</span> <span style="color: #993333;">30px</span> <span style="color: #993333;">red</span><span style="color: #00aa00;">;</span>


multiple box shadows

不同的阴影效果非常柔和的融合在一起,您也可能注意到,他们的定义顺序不同产生的效果也不同。因为

1
box-shadow

是CSS3的特性,而Firefox 3.5遵循的是CSS3的绘画顺序。也就是说,最先定义的影子显示在顶端,所以在设计多阴影的时候需要注意这一点。

最后,我们来看一个例子,使用

1
-moz-box-shadow

RGBA颜色定义。RGBA同RGB相同,不过他添加了一个附加值标示透明度的Alpha通道。让我们在黄色的背景上做一个黑色的拥有50%透明的模糊阴影:


1
-moz-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">inset</span> <span style="color: #993333;">5px</span> <span style="color: #993333;">5px</span> 0 rgba<span style="color: #00aa00;">(</span>0<span style="color: #00aa00;">,</span> 0<span style="color: #00aa00;">,</span> 0<span style="color: #00aa00;">,</span> .5<span style="color: #00aa00;">)</span><span style="color: #00aa00;">;</span>


box shadow with RGBA

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

跨浏览器兼容性

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

  • Firefox 3.5通过
    1
    -moz-box-shadow

    特化来支持这个属性,包括多阴影、

    1
    inset

    关键字和传播半径。

  • Safari/WebKit跟Firefox实现方式类似,通过
    1
    -webkit-box-shadow

    特化来支持阴影。多阴影从4.0版本开始支持,但是还不支持inset关键字和传播半径。

  • 最后,Opera和微软IE浏览器还没有实现盒子阴影属性,但是在IE浏览器,您可以试着使用他们私有的DropShadow过滤器

为了获得最大程度的支持,我们建议您定义全部三个属性,包括

1
-moz

1
-webkit

和标准的CSS3词法。相应的浏览器会选择相应的属性进行实现。例如:


1
2
3
-moz-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">10px</span> <span style="color: #cc00cc;">#00f</span><span style="color: #00aa00;">;</span>
-webkit-box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">10px</span> <span style="color: #cc00cc;">#00f</span><span style="color: #00aa00;">;</span>
box-shadow<span style="color: #00aa00;">:</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">1px</span> <span style="color: #993333;">10px</span> <span style="color: #cc00cc;">#00f</span><span style="color: #00aa00;">;</span>

好消息是

1
box-shadow

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

结论

CSS3的

1
box-shadow

属性还没有在浏览器中被广泛支持(用户也是),这跟

1
text-shadow

属性类似,但是随着WebKit和Firefox 3.5对盒子阴影的支持,越来越多的用户可以看到这种CSS阴影效果。作为网页开发人员,您可以使用这个特性,能够给用户提供一个全新的现代浏览器体验。

更多资源

文档

例子

标签:, , ,