兼容所有浏览器的CSS3圆角

在页面中引入curvycorners.js:



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


然后定义以下样式：




.roundedCorners{
width: [color:431b=#933]220px;
padding: [color:431b=#933]10px;
background-color: #DDEEF6;
border:[color:431b=#933]1px solid #DDEEF6;

/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: [color:431b=#933]6px;
-moz-border-radius: [color:431b=#933]6px;

}


然后在上面的样式后面定义以下代码：




<script type="text/JavaScript">
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");
}</script>


tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。



如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像这样在前面的代码中定义:




...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...


HTML代码如下：

<div class="roundedCorners"> </div>