JS第5款：PIE.js让IE6、IE7、IE8、IE9支持CSS3的圆角、阴影样式-推荐

一、插件介绍

说实话，这并不是一款jquery的插件，我放在这里，其实表明它是一款非常重要JS，它可以解决我们在IE6、IE7、IE8、IE9下css3下的圆角、阴影样式。让页面更漂亮。

遇到这款JS是这个原因，本来是一个朋友有一个其它的问题，就是在PNG图片下鼠标移上去，图片在后方向上移动，当然这个我已经解决了，在下一篇文章里会介绍到。我是这样想的：不规则图形鼠标移动过的效果，jquery应该能解决，可是在网上找了半天，也找不到这样的结果。后来，想了一想，最简单的不规则图形在CSS3里可以出现这个效果，于是我就拿CSS3制作出了圆，即用border-radius:50%完全可以制作出图片、DIV的圆形效果。

但下一个问题接着就出现了，IE10以下的浏览器并不认识CSS3啊！怎么办？于是在张鑫旭博客空间里《PIE使IE支持CSS3圆角盒阴影与渐变渲染》这篇2010年写的文章里提到了这些。汗啊……我到现在才知道这些……

但是张鑫旭那时的PIE.js可能不支持IE8，今天我使用了一下，完全支持IE6-IE9。

用途：这个插件可以做光盘啊，哈……

二、插件图片示例

三、官方网站

官方网站：http://css3pie.com

荐于国内网站常打不开国外的网站，本站收藏了官网下载的JS（这里分为两个版本）

1、1.0  下载地址 http://www.ijquery.cn/study/demo/pie/office/PIE-1.0.0.zip

2、2.0  下载地址 http://www.ijquery.cn/study/demo/pie/office/PIE-2.0beta1.zip

四、使用方法

1、引用pie.js
2、在所要支持的元素上的CSS上加上 behavior: url(PIE.htc); 

需要注意的是：

1、在本地测试不出效果，需上传到服务器，
2、在父容器里CSS里不能用background，否则IE下不能显示！

 有些人关于这个JS里写了好多，还写了一些其实完全没必要，直接注意两点。如下，这段代码我认为是没必要的。

<script language="javascript">
$(function() {
    if (window.PIE) {
        $('.rounded').each(function() {
            PIE.attach(this);
        });
    }
});
</script>

四、使用教程

HTML代码：

<div id="divcss5" ><img src="images.jpg" width="350" height="350"/></div>

JS代码：

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

CSS代码：

#divcss5{ width:350px;height:350px;overflow:hidden;}
#divcss5 img{ 
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-moz-box-shadow:0px 4px 5px #9C9C9C; 
	-webkit-box-shadow:0px 4px 5px #9C9C9C; 
	box-shadow:0px 4px 5px #9C9C9C;
	behavior: url(PIE.htc);
}