用javascript代码实现圆角显示
网页设计中圆角的使用越来越多，往往多是以图片背景的方式来实现，用这种方式实现圆角的缺点是图片加载增加了网络传输量，同时如果圆角的大小需要改变，需按照尺寸重新制作圆角图片。这里介绍一种用javascript来灵活实现圆角的方式，开发人员要实现圆角效果，不用每次都去求助美工了。

首先从curvycorners.net下载一个rounded_corners.js的js文件，遵循LPGL协议，最新的版本是1.2.9，支持对HTML中DIV元素实现圆角（rounded corners）修饰。主要特性：

免费
易于使用的javascript对象
不需要任何图片
反锯齿支持
可以在背景图片上实现反锯齿
可以修饰带有背景图片的DIV
可变的高度和宽度设置
支持solid border，也就是可以实现带颜色的圆角border
用户可以自定圆角半径
支持所有主流浏览器

用法：

<script type="text/JavaScript" src="rounded_corners.js"></script>

<DIV id="myDiv"></DIV>

<script type="text/JavaScript"> 

  window.onload = function()
  {
    settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true,
      autoPad: false
    } 

    var divObj = document.getElementById("myDiv"); 

    var cornersObj = new curvyCorners(settings, divObj);
    cornersObj.applyCornersToAll();
  }

</script> 

更加详尽的用法参考它自带的demo，大概的工作原理是curvyCorners一个像素一个像素的画出圆角，每一个像素用一个div实现，同时通过给每一个像素加上一定的不透明性来实现反锯齿。可以同时给多个div实现圆角，通过newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);

rounded_corners.js 附件下载