IE6+浏览器的圆角插件--DD_roundies_0.0.2a-min.js_网页表格特效,网页浮动层特效,js浮动层特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

在CSS3的border-radius圆角出来之前，做圆角只能用图片，或者是很麻烦的css，可以查看“纯CSS打造支持IE6的无图片圆角教程”。今天介绍的这款插件，可以完美解决IE的圆角问题，配合使用border-radius，保证在火狐等浏览器也显示圆角。先运行下面代码查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE6+浏览器的圆角插件--DD_roundies_0.0.2a-min.js_我爱模板 www.5imoban.net</title>  <style type="text/css"> #pic{border-radius:8px; background:url("http://www.5imoban.net/uploads/allimg/140121/1-140121111K60-L.jpg") -150px -130px; width:300px; height:300px; margin:0 auto;} </style> <script src="http://www.5imoban.net/download/jquery/DD_roundies_0.0.2a-min.js"></script> <script> DD_roundies.addRule("#pic", "8px"); </script>  <style> body{margin:0; padding:0;} ul#wimoban_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#wimoban_nav li{float:left; display:inline; margin:10px;} ul#wimoban_nav li a{display:block; font-size:16px;} ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{color:#000; font-family:"微软雅黑";} ul#wimoban_nav li a:hover,#wimoban_p a:hover{color:red;} #wimoban_p{text-align:center; font-size:14px; clear:both;} </style> </head> <body oncontextmenu='return false' ondragstart='return false'> <ul id="wimoban_nav"> <li><a title="返回网站首页" href="http://www.5imoban.net/">首页</a></li> <li><a title="网页PSD模板下载" href="http://www.5imoban.net/psdmoban/">PSD模板</a></li> <li><a title="网页CSS模板下载" href="http://www.5imoban.net/cssmoban/">CSS模板</a></li> <li><a title="网页特效、网页插件" href="http://www.5imoban.net/texiao/">特效插件</a></li> <li><a title="整站源码下载" href="http://www.5imoban.net/yuanma/">源码下载</a></li> <li><a title="酷站欣赏" href="http://www.5imoban.net/kuzhan/">酷站欣赏</a></li> <li><a title="建站资源" href="http://www.5imoban.net/ziyuan/">建站资源</a></li> <li><a title="建站视频教程、建站教程" href="http://www.5imoban.net/jiaocheng/">建站教程</a></li> <li><a title="建站心得、互联网事、心境之旅" href="http://www.5imoban.net/article/">心境之旅</a></li> </ul>  <div id="pic"></div>  <div id="wimoban_p"> <p>来代码整理：<a href="http://www.5imoban.net/" title="模板网" alt="模板网">我爱模板网</a></p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> </div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

1、引入http://www.5imoban.net/download/jquery/DD_roundies_0.0.2a-min.js。
2、需要加圆角的地方加入选择器，例如：ID=“pic”，使用下面代码即可实现圆角：

1<script>
2DD_roundies.addRule("#pic", "8px");
3</script>

3、为了兼容火狐等现代浏览器，请使用border-radius：

1<style type="text/css">
2#pic{border-radius:8px;}
3</style>

注：本插件不支持图片圆角，您可以将图片最为div等容器的背景，再使用本插件对该容器进行圆角处理。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

IE6+浏览器的圆角插件--DD_roundies_0.0.2a-min.js

猜你喜欢