手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >让IE 6,7,8模拟部分的css3属性
让IE 6,7,8模拟部分的css3属性
摘要:在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>

【让IE 6,7,8模拟部分的css3属性】相关文章:

css实现文字层浮在图片之上示例代码

CSS语法手册(一)字体属性

IE中css属性writing-mode使用

如何快速的呈现我们的网页

DIV滚动条属性

css让背景图片拉伸填充的属性

让div旋转一定的角度方法

10条影响CSS渲染速度的写法

一款css实现的鼠标经过按钮的特效

让内层将外层撑开

精品推荐
分类导航