分享超简单实用JS实现DIV、图片圆角效果，关键是很兼容

happy175 楼主

从网上找的，代码很兼容，操作也很简单，分享给大家，只需要加载JS文件即可；附件在下面下载。

JS调用方法：

1. DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);
   
2. DD_roundies.addRule('.websjy2', '5px', true);
   
3. DD_roundies.addRule('.websjy3', '500px', true);

复制代码

什么也不说了，狠狠的点在线演示：http://www.websjy.com/club/websjy_index/53/

下载：


解决IE9不兼容的方案：

<!--[if lte IE 8]>
<script src="js/DD_roundies_min.js"></script>
<script>
DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);
DD_roundies.addRule('.websjy2', '5px', true);
DD_roundies.addRule('.websjy3', '500px', true);
</script>
<![endif]-->

<style>
.websjy3{-moz-border-radius:500px;-webkit-border-radius:500px;border-radius:500px;}
.websjy2{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.websjy1{-moz-border-radius:5px 20px 3px 10px;-webkit-border-radius:5px 20px 3px 10px;border-radius:5px 20px 3px 10px;}
</style>

happy175 楼主

好代码与大家分享哦，这个效果是很兼容的，自己用了常见的浏览器测试，都是正常的，而且已经用到了项目中了

wyysf

确实很不错！这个作者写的在ie6支持png24透明的js插件也很给力！

workcss

效果还不错，不知道性能方面如何

satrong

IE9不兼容

raysonic

真的耶，效果很赞，可惜IE9不兼容~

happy175 楼主

我狠IE6、IE7、IE8、IE9、IE10、IE11、IE.....　没有一个好的，自家的产品，都有大问题。

fuguojian1988

很强，不错，支持一下

wyysf

原帖由 satrong 于 2011-8-19 09:52 发表
IE9不兼容

其实ie9你就不应该用这个插件，因为ie9本身就支持圆角了，这个插件建议只使用在ie678里面，其他的直接css就ok了！
这个插件经测试发现，如果用在弹出层上就悲剧了，因为会错位，经研究解决方案是，不能隐藏使用该插件的标签，可以使用margin-left: -9999px使我们看不到，然后在控制就可以了！

[ 本帖最后由 wyysf 于 2011-9-2 16:01 编辑 ]

happy175 楼主

是的

twostone

不错。好代码！

a6832176

IE9不兼容哦

happy175 楼主

a6832176 发表于 2011-8-27 23:32
IE9不兼容哦

解决方案：

<!--[if lte IE 8]>
<script src="js/DD_roundies_min.js"></script>
<script>
DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);
DD_roundies.addRule('.websjy2', '5px', true);
DD_roundies.addRule('.websjy3', '500px', true);
</script>
<![endif]-->

<style>
.websjy3{-moz-border-radius:500px;-webkit-border-radius:500px;border-radius:500px;}
.websjy2{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.websjy1{-moz-border-radius:5px 20px 3px 10px;-webkit-border-radius:5px 20px 3px 10px;border-radius:5px 20px 3px 10px;}
</style>

yangedie

很好，以前一直用border-radius.htc，使用也简单

1. -moz-border-radius: 10px;
   
2. -webkit-border-radius: 10px;
   
3. border-radius: 10px;
   
4. behavior: url(border-radius.htc);

复制代码

记事本打开border-radius.htc，有一段代码是

1. var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
   
2.                                         this.currentStyle['-webkit-border-radius'] ||
   
3.                                         this.currentStyle['border-radius'] ||
   
4.                                         this.currentStyle['-khtml-border-radius']) /
   
5.                                Math.min(this.offsetWidth, this.offsetHeight), 1);

复制代码

没有什么好说明的，就是不支持多角设置，看以上就知道了

nextfish

感谢，先用用了。

f2g2j2

好东西，收集一下！

happy175 楼主

yangedie 发表于 2011-10-24 15:29
很好，以前一直用border-radius.htc，使用也简单记事本打开border-radius.htc，有一段代码是没有什么好说明 ...

我之前也一直用htc来做，但有时会有莫名的问题

xa148

好多高手哦！

NoviceHou

留个脚印，好东西，支持一下

happy175 楼主

其实还有其它的方式实现圆角加阴影的

wangsdong

确实牛啊。谢谢了。

happy175 楼主

已经做了修改

flipyz

行，支持下湖北的老乡。

fengmoer

顶一个 很强大 一直在找的东东

duxingren001

非常的不错 见过最好的圆角代码

msd4218699

http://www.jsdianzicheng.com/

amry1982

学习了 收藏一下！！！

dideo

挺好用的

suozi

相当不错，收藏了！

flora8812

不错，收藏啦