纯CSS 利用“-moz-box-shadow”为图片添加阴影效果

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

今天看到QQ空间的相册中也用到了这一效果，于是翻翻源码，经一番努力发现原来是用到了“-moz-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;