CSS3 新增了不少实用功能,比如圆角、阴影、文字效果、渐变等,但比较纠结的是 IE6-8 还无法支持这些新特性,因为 IE 在国内还占据着相当大的市场份额,因此这个用 JS 编写的插件对国内开发人员来说是一个福音。本文将介绍 css3pie 的使用。
首先去官网下载 css3pie 插件,然后解压插件压缩包得到五个文件,其中有一个名字为 PIE.htc 的文件,这就是让 IE6-8 能够支持部分 CSS3 新特性的插件。将此文件上传至你站点所在的目录,文件路径可以自己设置。另外一个 PIE_uncompressed.htc 文件是未压缩的版本,如果懂得 JavaScript 的开发者还可以自行更改增强。PIE.php 文件是和 http 服务器设置问题导致无法使用 htc 的情况下才会用到,这时将 htc 文件和 PIE.php 文件放置在同一目录下,然后在具体的 CSS 条目下添加以下语句(具体用法参照下文):
2 | behavior: url (path/to/PIE.php); |
一般情况下不需要 PIE.php 文件,只需要 PIE.htc 文件即可。
PIE.htc 的使用方法:
假设你已经创建了一个 html 文件,要对其中某个元素创建圆角效果,HTML Code:
1 | < div id = "roundCorner" ></ div > |
在 CSS 文件中添加如下语句,CSS Code:
4 | border : 1px solid #999 ; |
5 | -webkit-border-radius: 10px ; |
6 | -moz-border-radius: 10px ; |
8 | behavior: url (path/to/PIE.htc); |
上面的代码中,-webkit-border-radius 是用来兼容 Safari 和 Chrome 浏览器,-moz-border-radius 是用来支持 Firefox 浏览器。样式代码中的 behavior:url(path/to/PIE.htc); 是导入的 PIE 插件,该插件的路径应该是之前上传到服务器时所放置的路径。
这样,在 IE6-8 浏览,就能够正确显示 CSS3 的圆角了,这个 PIE 还可以支持其他一些优秀的 CSS3 特征,比如阴影、渐变等,具体信息请参考 官网 以及一些 CSS3 的用法参考。