兼容所有浏览器的圆角

CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库，它的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript实现圆角。CurvyCorners的下载地址是http://www.curvycorners.net/，使用方法如下：

js代码：

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

<script type="text/JavaScript">

  curvyCorners.addEvent(window, 'load', initCorners);

  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }

　
    curvyCorners(settings, "#myBox");//第二个参数为一css选择器

    /*

    或者使用DOM对象方式

    var divObj = document.getElementById("myBox");
    curvyCorners(settings, divObj);

    */
  }

</script>

HTML代码：

<div id="myBox">
    这是一个兼容所有浏览器的圆角矩形
</div>

CSS代码：

<style>

#myBox {
　　width: 400px;
　　height: 200px;
　　border:5px solid #000;
　　font-size:16px;
　　text-align:center;
　　line-height:200px;
}

</style>

效果图：

转载于:https://www.cnblogs.com/momomo/archive/2011/07/14/2106084.html