能够兼容全部浏览器的 css3 圆角做法
今天网上看到一个能够兼容大部分主流浏览器（本人测试过的：firefox,chrome,oprea,IE6~9）的css3圆角做法，特记文分享：
HTML:
1 <div class="wrap">
2 <div class="border"></div>
3 </div>
CSS:
1 .wrap{background:#0f0; padding:10px 10px; width:500px; height:400px;}
2 .border{background:#f00; width:100%; height:100%; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
做到以上两步，只能实现在moz和webkit核心的浏览器上这现圆角，想要实现在IE上的圆角，还得外导一个js文件,curvycorners.js 点击下载，然后引入，并插入以下js代码:
1 <script type="text/javascript" src="curvycorners.js"></script>
2 <script type="text/JavaScript">
3 addEvent(window, 'load', initCorners);
4 function initCorners() {
5 var setting = {
6 tl: { radius: 10 },
7 tr: { radius: 10 },
8 bl: { radius: 10 },
9 br: { radius: 10 },
10 antiAlias: true
11 }
12 curvyCorners(setting, ".border");
13 }
14 </script>
其中,tl tr bl br 用来设置四个角的圆角幅度,ＯＫ了，测试下吧~
