跨浏览器实现盒阴影(box-shadow)效果

     现在流行的设计里总是使用了大量的阴影，看看Vista、win7里夸张的box阴影，mac里的阴影比比皆是。CSS3的box-shadow属性可以让我们轻松实现图层阴影效果，使我们可以不再总是依赖于使用图片。

实现盒模型阴影的综合代码：

/*Internet Explorer*/
background:#fff;

/*Internet Explorer 8 */

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) 
　　　　　　  progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";

/*低于Internet Explorer 版本8*/

*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);

/*标准浏览器*/
box-shadow:0px0px6px#CCC;

 

Shadow滤镜必须配合background属性一起使用，否则该滤镜失效

在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

Shadow滤镜的基本语法：

filter:Shadow(Color=color,Direction=direction,strength=strength)

1. color代表投影的底色，该数值是用英文字母来代替的， 例如投影底色是蓝色的话，就应该设置color=blue。
2. direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值45度为单位，它的默认值是向左的270度。
3. strength设置或检索以对象为基准的在运动方向上的向外扩散距离。

box-shadow的基本语法：

box-shadow:<length><length><length>||<color>

box-shadow:X轴位移 Y轴位移 阴影大小 阴影颜色

在低于Firefox4、Chrome10的浏览器中实现阴影效果需要添加：

-moz-box-shadow: 0px 0px 6px #CCC;

-webkit-box-shadow: 0px 0px6px #CCC;

连接：http://www.douban.com/note/232931620/