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

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

在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);/for ie6,7,8/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/firefox/
-webkit-box-shadow:2px 2px 5px #969696;/webkit/
box-shadow:2px 2px 5px #969696;/opera或ie9/
}

让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; / Firefox /
-webkit-border-radius: 15px; / Safari and Chrome /
border-radius: 15px; / Opera 10.5+, future browsers, and now also Inter 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); / 可以让IE 6,7,8模拟部分的CSS3属性 /
}

完整代码如下

复制代码

代码如下:

<!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);/for ie6,7,8/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/firefox/
-webkit-box-shadow:2px 2px 5px #969696;/webkit/
box-shadow:2px 2px 5px #969696;/opera或ie9/
}
.box-radius {
width:200px; height:100px;margin-bottom:20px;
background-color: #eee;
border-radius: 15px;
behavior: url(http://jt.875./css3/border-radius.htc);
}
.box {
width:200px; height:100px;background-color: #eee;margin-bottom:20px;
-moz-border-radius: 15px; / Firefox /
-webkit-border-radius: 15px; / Safari and Chrome /
border-radius: 15px; / Opera 10.5+, future browsers, and now also Inter 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(http://jt.875./css3/ie-css3.htc); / 可以让IE 6,7,8模拟部分的CSS3属性 /
}
</style>
</head>
<body>
<div class="box-shadow"></div>
<div class="box-radius"></div>
<div class="box"></div>
</body>
</html>

上一篇：让IE 6,7,8支持CSS3的部分属性及htc的应用下一篇：IE下判断IE版本的语句...[if lte IE 6]……[endif]兼容

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设