必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=750

我们平时使用CSS样式来给页面元素制作圆角效果，但需要使用很多多余的HTML元素，不利于代码的维护，这里介绍一个jQuery插件jRounded圆角，可以轻松给任意元素增加圆角效果，使用非常简单，实例如下：

使用说明
需要使用jQuery库文件和jRounded圆角库文件

需要CSS样式文件，定制你圆角的显示效果，CSS样式代码如下(可修改为需要的效果)

1. .box{position:relative;background-color:#eee;margin-bottom:25px;padding:10px;}
2. .box .tl,.box .tr,.box .bl,.box .br{position:absolute;width:10px;height:10px;}
3. .box .tl{background-image:url(images/box-tl.gif);top:0;left:0;}
4. .box .tr{background-image:url(images/box-tr.gif);top:0;right:0;}
5. .box .bl{background-image:url(images/box-bl.gif);bottom:0;left:0;}
6. .box .br{background-image:url(images/box-br.gif);bottom:0;right:0;}
7. .box .bg-white{background-color:#fff;padding:10px;}

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.min.js"></script>
2. <script type="text/javascript" src="jRounded.js"></script>
3. <link rel="stylesheet" href="jRounded.css" />

二，HTML部分

1. <div class="biuuu">
2. ……需要使用圆角的内容……
3. </div>

三，Javascript部分(调用jQuery插件jRounded圆角)

1. <script>
2. $(document).ready(function() {
3. $('.biuuu').box();
4. });
5. </script>

完整的jQuery插件jRounded圆角JS代码

1. (function($){
2. $.fn.extend({
3. box: function() {
4. return $(this).each(function(){
5. $(this).wrap('<div class="box"><div></div><div class="tl"></div><div class="tr"></div><div
6. class="bl"></div><div class="br"></div></div>');
7. });
8. }
9. })
10. })(jQuery);

以上实例可知使用jQuery插件jRounded圆角非常简单，轻松实现javascript给页面元素生成圆角功能。不需要考虑div元素一层与一层之间的关系，简单一行代码实现圆角，值得推荐。

点我下载jQuery插件jRounded圆角实现javascript给页面元素生成圆角功能演示