CurvyCorners -- 让你的IE也支持CSS3圆角

自从CSS3标准出来后，对于圆角的处理变得更简单了，仅仅用几行CSS代码就能实现圆角。但是，目前还有不少浏览器仍不支持CSS3标准，比如 IE6、7、8，那么我们是否能让IE也支持像CSS3那样的圆角呢？答案是当然可以的，用Javascript吧，这里我向大家推荐一个 Javascript圆角插件CurvyCorners。

如果用纯CSS3实现圆角，可以参考一下代码：

/*-moz-border-radius 是 Firefox 实现圆角的私有属性*/
-moz-border-radius: 5px;
/*-webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性*/
-webkit-border-radius: 5px;

以上代码仅在支持CSS3的浏览器上才有圆角效果，下面是能兼容所有浏览器的圆角插件CurvyCorners的用法，让你的IE也支持CSS3圆角。

1、从CurvyCorners网站上下载源码：http://www.curvycorners.net/

2、在页面中引入CurvyCorners的js脚本：

<script type="text/javascript" src="curvycorners.js"></script>

3、给你需要实现圆角的元素（比如一个div）定义一个CSS样式，如：

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
  
/* 支持CSS3的firefox或chrome就可以应用下面的圆角属性 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

4、最后一步初始化一下：

addEvent(window, 'load', initCorners);
function initCorners() {
    var setting = {
       tl: { radius: 6 },
       tr: { radius: 6 },
       bl: { radius: 6 },
       br: { radius: 6 },
       antiAlias: true
    }
    curvyCorners(setting, ".roundedCorners");
}

其中tl表示top-left，tr表示top-right，bl表示bottom-left，br表示bottom-right，这样解释你应该懂的。

这么一来，你的IE是不是就支持CSS3圆角了呢，兴奋一把吧。

原文来自：HTML5中文网站