JS+CSS实现矩形对象的圆角效果

“圆角”，对于成功的网页设计师而言，在不同的时候或者领域里，是一个不可取得的重要元素。一般而言，矩形给人一种正规、严肃之感；而圆角却给人带来一种灵活之意。为了表达这种效果，不少网页设计师都会在PS中事先处理好原稿；但对于有经验的前端设计者来说，为了充分利用“圆角”的扩展性，在排版方面不得不花点心思……

刚才前段时间在网上看到国外一些优秀的JS集成源码，于是我把一些典型、常用的圆角效果整理了一下。现在就跟大家一起分享一下吧！

在开始讲解圆角效果的实现方法之前，我们首先看看设计JS的主函数 function Rounded(selector,wich,bk,color,opt){……}这里面重点是五个参数的意义——

(1)selector：是要实现圆角的对象。因为在下面的实例中都是用到DIV对象，所以格式："div#"+对象ID。

(2)wich：对象哪些地方需要圆化，参数值有：all、top、bottom、tr bl等。从英文意义上看基本知道是哪些地方需要圆角化吧？！all就是四角都要，top是指上边两个角，tr bl是指右上角和左下角……诸如此类！

(3)bk：圆角对象所在区域的背景色，要么就是颜色值，要么就是透明（transparent）。这样设置就是为了实现视觉上的圆角效果。

(4)color：圆角处的颜色，参数值跟bk一样。值得一提是，当值为transparent时，后面就不用带参数opt了。

(5)opt：圆角边框样式——包括边框颜色、粗细等。

说了一堆东西，大家可能对这个还是有点模糊，下面就让我们一起把典型的实例列举一下吧——

1、统一的圆角特效（如图1所示）



图1
左边蓝色对象的实现函数：Rounded("div#Content1", "all","#FFF","#9DD4FF","smooth");

右边红色对象的实现函数：Rounded("div#nav", "tr br","#FFF","#FFC79D","smooth");

依照上述几个参数的说明可以看出，左边蓝色对象四个地方都实现了圆角效果，而红色对象则只对右上角和右下角实现了，并且都是用了smooth（圆滑）效果。

2、背景图圆角化（如图2所示）



图2
实现函数：Rounded("div#ImgBG", "all","#FFF","transparent");

从效果图可见，背景图的圆角是没有边框的，所以color设置为transparent。

3、同一对象设置不同的圆角效果（如图3所示）



图3
实现函数——

(1)Rounded("div#News", "top","transparent","#D9ECFF","border #C0C0C0");

(2)Rounded("div#News", "bottom","transparent","#FFE3CE","small border #C0C0C0");

从效果图可见，上下圆角的背景色和圆角弧度都不同，所以它们的bk值根据各自的背景色而定；而上边的圆角弧度是常见的效果，下边的圆角弧度使用small border是相对小一点的。

4、灵活性的圆角效果（如图4所示）



图4
该效果是从3中延伸出来的，实现函数：Rounded("div#Navs li", "top","transparent","#BEFF9A","border #508F0F");

5、带粗边线的图片圆角效果（如图5所示）



实现函数：Rounded("div#ImgsList li", "all","#666","#FFF","smooth");

从实现函数看到圆角边线只是用了smooth，但效果图却显得有点粗，这是为什么呢？其实这里面是对图片所在区域(li)进行圆角化，而只要通过设置其宽度即能实现此效果了。

【源码下载】