转 网页圆角代码（纯CSS）
从网站统计里看到很多朋友是为了寻找圆角代码而到这里的，为了不让大家失望所以重写了两篇圆角教程，这一篇是纯CSS制作圆角的方法，另一篇是利用图片制作圆角的方法。
相信不久的将来再需要做圆角效果，就不会再用这么复杂而且不符合语义的方法了，因为CSS3里已经自带圆角效果，而现在很多浏览器也已经支持CSS3，除了垃圾的MS IE。
圆角弧度1：
我们先来说说最简单的弧度为1的圆角。上图为圆角div放大20倍的效果，图中的圆角框共有4条线，可以从上到下看作是由3个div构成。
3个div我分别用红和黄的框画出来了，这样一个圆角块就是由这3个div做出来的。
第一个和第三个（红框）的div高度为1px，左右边距为1px，线条用背景色（background）来呈现，CSS如下：
.flt1-a { height: 1px; margin: 0 1px; background: #333; }
第二个（黄框）div高度自动延伸，线条用左右边线（border）来显示：
.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }
需要提醒各位，在IE6下，把div高度的值设为很小时，IE6浏览器并不能作出正确的诠释呈现，总是会长出来一截，所以我们需要为IE6再写一段CSS，用于隐藏设定高度的超出部分：
.flt1-a { overflow: hidden; }
然后在HTML的某个div容器里写上他的结构：
<div class="fillet-box"> <div class="flt1-a"></div> <div class="flt-m"> 弧度为1的圆角演示 </div> <div class="flt1-a"></div> </div>
最终效果：
圆角弧度2：
上图是弧度为2的圆角，可以把它看为5个div，第一个和最后一个div（红框）样式是一样的：高度1px，左右边距2px，线条用背景色（background）呈现，CSS如下：
.flt2-a { height: 1px; margin: 0 2px; background: #333; }
第二个和第四个（黄框）div的高度为1px，左右边距1px，线条用边线（border）来呈现，CSS如下：
.flt2-b { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
第三个（蓝框）div高度自动延伸，线条用左右边线（border）来显示：
.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }
为IE6：
.flt2-a,
.flt2-b { overflow: hidden; }
然后我们在HTML的某个div里写上他的结构：
<div class="fillet-box"> <div class="flt2-a"></div> <div class="flt2-b"></div> <div class="flt-m"> 弧度为2的圆角演示 </div> <div class="flt2-b"></div> <div class="flt2-a"></div> </div>
最终效果：
圆角弧度3：
第一个和最后一个div（红框）CSS：
.flt3-a { height: 1px; margin: 0 3px; background: #333; }
第二个和第六个div（黄框）CSS：
.flt3-b { height: 1px; margin: 0 1px; border-left: 2px solid #333; border-right: 2px solid #333; }
第三个和第五个div（蓝框）CSS：
.flt3-c { height: 1px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
第四个（绿框）CSS：
.flt-m { border-left: 1px solid #333; border-right: 1px solid #333; }
为IE6：
.flt3-a,
.flt3-b,
.flt3-c { overflow: hidden; }
然后我们在HTML的某个div里写上他的结构：
<div class="fillet-box"> <div class="flt3-a"></div> <div class="flt3-b"></div> <div class="flt3-c"></div> <div class="flt-m"> 弧度为3的圆角演示 </div> <div class="flt3-c"></div> <div class="flt3-b"></div> <div class="flt3-a"></div> </div>
最终效果：
圆角弧度4：
从这个起我不再解释，我只放上CSS和HTML。
CSS：
.flt4-a { height: 1px; margin: 0 4px; background: #333; }
.flt4-b { height: 1px; margin: 0 2px; border-left: 2px solid #333; border-right: 2px solid #333; }
.flt4-c { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
/* for ie6 */
.flt4-a,
.flt4-b,
.flt4-c { overflow: hidden; }
HTML：
<div class="fillet-box"> <div class="flt4-a"></div> <div class="flt4-b"></div> <div class="flt4-c"></div> <div class="flt-m"> 弧度为4的圆角演示 </div> <div class="flt4-c"></div> <div class="flt4-b"></div> <div class="flt4-a"></div> </div>
最终效果：
圆角弧度5：
CSS：
.flt5-a { height: 1px; margin: 0 5px; background: #333; }
.flt5-b { height: 1px; margin: 0 3px; border-left: 2px solid #333; border-right: 2px solid #333; }
.flt5-c { height: 1px; margin: 0 2px; border-left: 1px solid #333; border-right: 1px solid #333; }
.flt5-d { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
/* for ie6 */
.flt5-a,
.flt5-b,
.flt5-c,
.flt5-d { overflow: hidden; }
HTML：
<div class="fillet-box"> <div class="flt5-a"></div> <div class="flt5-b"></div> <div class="flt5-c"></div> <div class="flt5-d"></div> <div class="flt-m"> 弧度为5的圆角演示 </div> <div class="flt5-d"></div> <div class="flt5-c"></div> <div class="flt5-b"></div> <div class="flt5-a"></div> </div>
最终效果：
你理解了吗？如果理解了请尝试自己动手做出以下效果：
1. 做一个带有背景色的圆角效果。
2. 做一个圆角弧度为8的圆角效果。
3. 做一个边框线条为2px的圆角效果。
提示：其实圆角的HTML标签，不一定要用div，为了让代码简练，我们可以用<b>、<i>等短元素也可以，只要在CSS里用display:block;把它们申明成块级元素就行了。
但是有些元素已经或即将被XHTML抛弃，所以会无法通过XHTML的验证，请你自行斟酌选择理想的标签。
纯CSS圆角优点：
1. 无图片，加载速度快，不会出现圆角加载延迟等情况。
2. 不受图片局限，可随意改变边框颜色和背景。
纯CSS圆角缺点：
1. 锯齿感强烈。
2. 代码繁杂不易阅读，结构不语义化，偏离XHTML的精神。
3. 不易改变背景色，弧度越大要改变背景色就越难。
4. 做大弧度圆角时不易理解构成圆角的线条，需有一定的绘画能力。
