完美的纯CSS圆角

记得以前还在学校以及刚出来工作的时候，WEB1.0风格的网站别说圆角了，就连图片都是一大版一大版的。后来渐渐改进了些，切一个小角当背景图来做圆角，不管怎么说，只要用到图片的话，怎么说都浪费掉了一个IIS链接数（关于这个以后讲解），而用纯CSS来做圆角，不仅效果不比图片差，而且代码也并不复杂。

关于用CSS画圆角的原理，我们先把一个圆角给放大了来看，就很简单明了了。

这是一个5像素的圆角，我们可以看到每个像素只是水平边距不同，那么我们的样式可以这样写：

<mce:style><!-- div {height:100px; border-right:1px solid #000; border-left:1px solid #000;} b {display:block; overflow:hidden; height:1px;} .b1 {background:#000; margin:0 5px;} .b2 {border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;} .b3 {border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;} .b4 {border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;} --></mce:style><style mce_bogus="1">div {height:100px; border-right:1px solid #000; border-left:1px solid #000;} b {display:block; overflow:hidden; height:1px;} .b1 {background:#000; margin:0 5px;} .b2 {border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;} .b3 {border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;} .b4 {border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}</style>

 

这是用b标签来当做圆角的转角，当然，理解了原理之后，可以延伸出多种的圆角。
 在html页面里这样写就可以了：

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div></div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>