网页实现圆角的几种方式

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 是水平排列的。