让IE 6,7,8模拟部分的css3属性

时间：2021-05-08

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜
基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

复制代码代码如下:
.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;
-webkit-box-shadow:2px 2px 5px #969696;
box-shadow:2px 2px 5px #969696;
}
让IE实现CSS3中的border-radius（圆角）

复制代码代码如下:
.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}
大家知道IE 6,7,8不支持CSS3中新加属性，老外写了一个htc，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）：
注意：htc文件是要放在服务器上，放在本地测试是不行的！

复制代码代码如下:
.box {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
behavior: url(ie-css3.htc);
}
完整代码如下：

复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>让IE支持css3</title>
<style>
.box-shadow{
width:200px; height:100px;
margin-bottom:20px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;
-webkit-box-shadow:2px 2px 5px #969696;
box-shadow:2px 2px 5px #969696;
}
.box-radius {
width:200px; height:100px;margin-bottom:20px;
background-color: #eee;
border-radius: 15px;
behavior: url(http://jt.875.cn/css3/border-radius.htc);
}
.box {
width:200px; height:100px;background-color: #eee;margin-bottom:20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
behavior: url(http://jt.875.cn/css3/ie-css3.htc);
}
</style>
</head>
<body>
<div class="box-shadow"></div>
<div class="box-radius"></div>
<div class="box"></div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章