跨浏览器实现盒阴影(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/
posted @ 2013-09-08 00:31  leejersey  阅读(5964)  评论(0编辑  收藏