css3 pie 让IE也体验Css3

http://www.luidea.com/weboperation/Htmlcss/20110209_170.html

1、下载CSS3PIE插件

点击下载地址，下载css3pie插件。

2、上传到服务器

在下载完成的压缩里面，里面有三个文件，有一个名字为PIE.htc的文件，这就是让IE6-8能够支持部分css3特征的插件。将此文件上传至你 站点所在的目录，文件路径可以自己设置。另外一个uncompressed文件是未压缩的版本，如果懂得java script的开发者还可以自行更改增强。
php文件是和http服务器设置问题导致无法使用htc的情况下才会用到，这时将htc文件和php文件放置在同一目录下，然后在具体的CSS条目下添加以下语句（具体用法参照下文）：

1	behavior: url(PIE.php);

3、编写CSS

假设你已经创建了一个html文件，要对其中某个元素创建圆角效果。

1	<div id="roundCorner"></div>

在CSS文件中添加如下语句：

1	#roundCorner {

2	height:100px;

3	border: 1px solid #999;

4	-webkit-border-radius: 10px;

5	-moz-border-radius: 10px;

6	border-radius: 10px;

7

}

上面的代码中，-webkit-border-radius是用来兼容Safari和谷歌浏览器，-moz-border-radius是用来支持火狐浏览器。

4、应用PIE到IE浏览器

在之前的CSS表达后面添加代码如下：

1	behavior: url(path/to/PIE.htc);

这时候导入的PIE的路径应该是之前上传到服务器时所放置的路径。

5、其他PIE可用的CSS3特征

这样，在IE6-8打开，就能够正确显示CSS3的圆角了，圆角实例就完成了，这个PIE还可以支持其他一些优秀的CSS3特征，比如阴影、渐变等，具体信息请参考此页面以及一些CSS3的用法参考。

转载请注明来源：集思网