论坛首页 Web前端技术论坛

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

浏览 14617 次
精华帖 (0) :: 良好帖 (3) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-08-10   最后修改:2011-08-18

此代码也是从网上找的,代码很兼容,操作也很简单,只需要加载JS文件即可;附件在下面下载。

 

JS调用方法:

 

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

 

 

HTML代码使用方法:

 

 

更多效果演示:http://www.websjy.com/club/websjy_index/53/

 

 

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#66FFFF; margin-bottom:10px;" class="websjy1">DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);</div>
<h3>效果2</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#EEE; margin-bottom:10px;" class="websjy2">DD_roundies.addRule('.websjy2', '5px', true);</div>
<h3>效果3</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#ff0000; margin-bottom:10px;" class="websjy3">DD_roundies.addRule('.websjy3', '1000px', true);</div>
 

效果:



 

 

下载文件:

 

 

 

 

  • 大小: 18 KB
   发表时间:2011-08-12  
效果不错,幸苦楼主收集了
0 请登录后投票
   发表时间:2011-08-12  
我用了,为什么设置不了背景图片啊,还有在ie8下,左上边有个空隙。
0 请登录后投票
   发表时间:2011-08-13  
mARK  多谢多谢
0 请登录后投票
   发表时间:2011-08-14  
不错的代码.
谢谢分享
0 请登录后投票
   发表时间:2011-08-15  
保存了,非常好,
只是不知道有几十个圆解的时候效果怎么样。
0 请登录后投票
   发表时间:2011-08-16  
试了下,效果不错,多谢楼主分享。
0 请登录后投票
   发表时间:2011-08-16  
不兼容IE
0 请登录后投票
   发表时间:2011-08-17  
这个还是有些bug 的 关于圆角的实现 这里还有几个方式可以参考下。详细见http://lmh2072005.iteye.com/admin/blogs/1134747
0 请登录后投票
   发表时间:2011-08-18  
你是如此出色 辛苦了!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics