让IE也支持css3中box-shadow属性

让IE也支持css3中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是投影的大小值。
加载中

关键字

喜欢这篇文章?马上分享它!