让你的ie浏览器支持box-shadow

方法一:

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

<!--[if IE]> 
<style type="text/css"> img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);} </style> 
<![endif]-->

蓝色部份输入要使用box-shadow属性的选择器,绿色部份输入ie-css3.htc的绝对路径,或相对路径,反正要保证能访问得到。

然后这样就OK了。但还是有几点需要注意的是:

  • 当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
  • 当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
  • 不支持RGBA值中的alpha透明度。
  • 不支持inset内阴影。
  • 不支持阴影扩展。
  • 阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。

但是,这个脚本了仅仅是让IE支持了部份的box-shadow值。

方法二:
在<head></head>标签里加入如下代码:
<style type=”text/css”>
img{background: #fff;

-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)”;

*filter: 
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}
</style>
其中:color是投影的颜色,direction是顺时针的角度值,strength是投影的大小值。