浏览器

这几天Kainy在网上闲逛见到一些博客的图片有漂亮的阴影效果,还以为是每张图片上传前处理过,可是在ie6下浏览则无阴影效果,问了好多地方都没结果,网络上查找到的也大都是用css调用带阴影图片做背景和图片结合起来,形式的阴影效果,并非纯css生成的阴影效果。

今天看到QQ空间的相册中也用到了这一效果,于是翻翻源码,经一番努力发现原来是用到了“-moz-box-shadow”这──盒子阴影。这个特性允许在任何支持盒子模型的元素上投射出“阴影”效果。

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

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


none | <shadow> [ <shadow> ]*

这里<shadow>被定义为:

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

前面两个length长度取值对应着影子在水平和竖直方向的位移。第三个length长度取值是模糊半径。最后第四个length长度取值是传播半径,使用正数表示影子拉长,使用负数表示影子缩短,而这个长度是相对于父元素的大小而言的。

知道了以上参数,要实现图片的阴影效果也就不难了,例如wp中,只需

1.添加样式:

shadow{-moz-box-shadow: 2px 2px 6px #00f;}

2.在插入图片时候,“高级选项”→“CSS Class”中写入 “shadow” 更新就Ok啦。

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


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

如果你需要,你还可以定义多个阴影,使用逗号隔开(例子来自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;

写博

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

写于异年同日:

  1. 2012:  姑丈(0)