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

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-11-14 22:58:22
  • 点击:3424
[80分]

“圆角”,对于成功的网页设计师而言,在不同的时候或者领域里,是一个不可取得的重要元素。一般而言,矩形给人一种正规、严肃之感;而圆角却给人带来一种灵活之意。为了表达这种效果,不少网页设计师都会在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)进行圆角化,而只要通过设置其宽度即能实现此效果了。

源文件下载

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华