代码改变世界

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

2012-04-28 16:18  HTML5中文网站  阅读(593)  评论(0编辑  收藏  举报

自从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中文网站