最新消息:

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

JS插件 杨红伟 5071浏览 0评论

一、插件介绍

说实话,这并不是一款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/demo/pie/office/PIE-1.0.0.zip

2、2.0  下载地址 http://www.ijquery.cn/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);
}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址