让IE6-8正确的显示圆角-CSS3 PIE

2014-10-23

很多项目开发中会兼容IE6-8,但是IE6-8不支持CSS3这使得很多漂亮的圆角效果实现起来非常的麻烦,本篇教程中将介绍如何使用CSS3 PIE让IE6-8正确的显示圆角。

要想在老版本IE中正确的显示CSS3属性,我们需要借助一些额外的工具,其中比较好用的就是CSS3 PIE了。接下来就通过CSS3 PIE提供的方法来实现在老版本IE浏览器中显示CSS3属性。

CSS3 PIE支持在老版本IE中使用下面的CSS3属性:

border-radius, box-shadow, border-image, gradients, RGBA color还有一些CSS3 PIE自定义的属性,本篇文章主要介绍一下border-radius

如何使用CSS3 PIE

首先你需要去官网下载CSS3 PIE,然后解压到你的网站目录下面,具体的目录位置你可以随意放置。现在你就可以在项目中使用上面的CSS3属性了。

在使用了CSS3属性之后,你需要在css相应的位置加上下面的这段代码,通知CSS3 PIE帮助我们在老版本IE中正确的显示CSS3属性:

behavior: url(path/PIE.htc);

上面值得注意的是,url里面的路径不是相对于css文件的路径,而是相对于使用这个CSS类的网页的路径。和background-image中url的路径是不一样的,这一点特别重要,否则CSS3 PIE将不能正确的工作。

发表评论

邮箱地址不会被公开。 必填项已用*标注