IE兼容border-radius的方法

让IE6，IE7，IE8支持CSS3效果，是利用 VML 模拟。VML是The Vector Markup Language(矢量可标记语言)

使用方法:

在html加载

PIE.js

脚本，用IE专用的注释。

<!--[if lt IE 10]>
<script type="text/javascript" src="js/PIE.js"></script>
<![endif]-->

css样式

.c{
width: 200px;
height: 50px;
background: #BBFFAA;
behavior: url(PIE.htc);
border-radius: 25px;
}

在js中调用(已引入jQuery)

$(function() {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
});

需要注意的是:

*

PIE.htc

需要放在服务器上运行,本地服务器也可以

* 必须四个角同时是圆角,不能指定设置其中一个方向的圆角

* 当前元素用

position:absolute/relative

定位,dom结构复杂会出现错位情况

* 宽度自适应会出现垂直方向滚动条,用

overflow:hidden

去掉

*

PIE.htc

引入方法:

1

PIE.htc

也放置在js目录下,

behavior: url(js/PIE.htc);

css属性放置在内部样式中



2

PIE.htc

和html文件在同一级目录,

behavior: url(js/PIE.htc);

置于css外部样式中



在ie7浏览器运行如下



亲测

text-shadow

和

box-shadow

都有效果

PIE.htc

和

PIE.js

下载地址:

官方实时测试例子：http://css3pie.com/

官方下载：http://css3pie.com/download-latest