关于网页中圆角实现
在我们日常的开发中，经常会碰到需要将div的border设置为圆角效果，已达到美化，提高用户体验的目的。
从历史的角度来说，圆角效果的实现一般都是很棘手的问题。一般都是通过图片以及JavaScript方式来实现。在CSS3之前，CSS不支持直接设置圆角的属性。于是在新一代的CSS中增加了圆角效果设置属性，即
但是遗憾的是主流浏览器对其的支持层次不齐，早前版本浏览器不支持此属性，这也就造成在日常的开发中，为了保证兼容性，此属性的应用还没有被普及，常常要做一些舍近求远的做法。
一个兼容性好的解决方案，才是我们真正需要的，所以下面介绍两种：
1、基于传统的Javascript方式控制圆角效果的兼容性很好的解决方案：
这种方式实现的解决方案有很多，这里就用其中很优秀的 curvycorners来说明。为什么要使用curvycorners.js呢？因为其屏蔽了各种浏览器的差异，在内容解决兼容性问题，使得我们使用时变得很方便。下面就是其使用例子：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3: <head>
4: <title>curvyCorners Demo 1</title>
5: <script type="text/JavaScript" src="../curvycorners.src.js"></script>
6: <style>
7:
8: #myBox {
9: margin: 0.5in auto;
10: color: #fff;
11: width: 60%;
12: padding: 20px;
13: text-align: left;
14: background-color: #f00;
15: border: 3px solid #fff;
16: }
17:
18: html,body {
19: height: 100%;
20: text-align: center;
21: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
22: font-size: 12px;
23: margin: 0px;
24: background-image: url(pattern.gif);
25: color:#FA0;
26: }
27:
28: </style>
29: <script type="text/JavaScript">
30:
31: curvyCorners.addEvent(window, 'load', initCorners);
32:
33: function initCorners() {
34: var settings = {
35: tl: { radius: 20 },
36: tr: { radius: 20 },
37: bl: { radius: 20 },
38: br: { radius: 20 },
39: antiAlias: true
40: }
41: curvyCorners(settings, "#myBox");
42: }
43:
44: </script>
45: </head>
46:
47: <body>
48: <h1>curvyCorners Demo 1</h1>
49:
50: <div id="myBox">
51: It's my box. If you saw the radius effect, you got it!
52: </div>
53:
54: </body>
55: </html>
从上例中，很容就知道怎么使用cruvycorners了，在使用网页中引用cruvycorners.js文件，通过tl，tr, bl, br来分别控制div的四角，在通过cruvyCorners()函数将其应用到需要圆角效果的div上。就这么简单。
当然，在CruvyCorners v2.0.x开始提供了直接的CSS的方式，使用方式CSS3没有什么大的区别，请参考下面例子。
2、沿用CSS3的优良特性，是那些不支持CSS3的浏览器，也能够正确解析CSS3的新增属性：
使不支持CSS3的浏览器拥有解析CSS3新属性的能力可以借助 ie-ccs3.htc 。IE-CCS3其实就是使IE6、7、8能够解析CCS3新属性的脚本。它的使用也很方便，就在需要用到CSS3新特性的地方添加一个behavior属性，就可以了。如：
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
其实，需要说明的是-moz-border-radius是火狐实现属性，-webkit-border-radius是webkit内核的实现，即Safri和Chrome，而border-radius的标准属性。其中behaviour属性是必须的，值为ie-ccs3.htc的路径。
