网页实现圆角的几种方式

1. table ＋ 图片: 适合所有浏览器

原理：三行三列的 table, 如下图，1，3，7，9，放圆角图片；2,4,6,8 放边框；5 放内容

1 222222222222222 3

4 6

4 6

4 5 6

4 6

4 6

4 6

7 888888888888888 9

2. css3 实现: IE 和 oprea 目前不支持

css3 中增加了圆角属性：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px
-webkit-border-bottom-right-radius: 5px;
// －moz 开头的是 firefox 特有的
// wekit 开头的在 chrome 和 safari 下有效
// IE（6－8） 目前还不支持 css3 圆角
// Opera 也不支持 css3 圆角

/* 牛人总结的 */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

3. div 实现：使用于所有浏览器, Google Code 这样实现的

原理： 外层 div 设置背景，外层 div 里面的上面和下面分别放几个高 1px 的 div，给这些 div 设置 border-left 和 border-right 这两个属性，border 设置颜色来覆盖掉背景颜色，border 的宽度递增变化使看起来圆滑。

例子：

<div style="width:300px;height:300px;background:blue">
<div style="height:1px;border-left:solid 4px #fff;border-right:solid 4px #fff"></div>
<div style="height:1px;border-left:solid 2px #fff;border-right:solid 2px #fff"></div>
<div style="height:1px;border-left:solid 1px #fff;border-right:solid 1px #fff"></div>
<div style="height:294px;"></div>
<div style="height:1px;border-left:solid 1px #fff;border-right:solid 1px #fff"></div>
<div style="height:1px;border-left:solid 2px #fff;border-right:solid 2px #fff"></div>
<div style="height:1px;border-left:solid 4px #fff;border-right:solid 4px #fff"></div>
</div>

如果觉得这样些麻烦的话可以使用 js 的一个实现圆角的库：CurvyCorners http://www.curvycorners.net/

这个库使用同样原理来实现的，不过个人觉得使用这个库比较慢(IE 下)！如果看下 js 生成的 html 就会发现每个圆角会生成很多个 div，因为 js 生成的 每个 div 是水平排列的。