设计创意

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

在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-shadowRGBA颜色定义。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阴影效果。作为网页开发人员,您可以使用这个特性,能够给用户提供一个全新的现代浏览器体验。

更多资源

文档

例子

(0)

本文由 Jackchen Design 1984 作者:jackchen 发表,转载请注明来源!

关键词:, ,

热评文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注