ie-css3.htc 让IE6, 7, and 8也支持box-shadow_ Div+Css教程-查字典教程网
ie-css3.htc 让IE6, 7, and 8也支持box-shadow
ie-css3.htc 让IE6, 7, and 8也支持box-shadow
发布时间:2016-12-27 来源:查字典编辑
摘要:首先下载ie-css3.htc脚本,然后在css中加入:它的使用方法是:下载它并放到你的服务器目录在你的里面写入下面的代码:.box{-mo...

首先下载ie-css3.htc脚本,然后在css中加入:

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

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

.box {

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari and Chrome */

border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */

-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */

box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc);

}

注意:behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面,要不然可能会看不到效果。

IE-CSS3.HTC下载地址:

下载地址: 点击下载 前往官网

•当你使用了这个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是投影的大小值。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类