让IE 6,7,8模拟部分的css3属性
让IE 6,7,8模拟部分的css3属性
发布时间:2016-12-27 来源:查字典编辑
摘要:在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜基本语法:filter:progid:DXImag...

在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 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); /* 可以让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.cn/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 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(http://jt.875.cn/css3/ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

</body>

</html>

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