一直都很想写一篇关于CSS实现圆角的文章，今天不想再错过。之前有一篇用CSS去实现三角形有很多种方法，但这里用CSS2.0实现圆角只有一种方法。我们知道，如果使用最新的CSS3.0，只需要使用它独有的属性border-radius即可。比如，要圆角10px，则为border-radius:10px。但是，CSS2.0却没有提供类似的属性，于是前端们发挥它们的聪明才智，不靠背景图，而只用CSS2.0也完成了圆角的功能。

原理：利用CSS的margin，以及DIV上下排列的宽度相差两像素来模拟圆角。

<style>
.corner{width:500px;height:auto;background:green;overflow:hidden;}
.top,.bottom{background:#fff;}
.c1,.c2,.c3,.c4{display:block;height:1px;background:green;overflow:hidden; }
.c1{margin:0 5px;}
.c2{margin:0 3px;}
.c3{margin:0 2px;}
.c4{margin:0 1px;height:2px;}
</style>

<div class="corner">
    <div class="top">
        <span class="c1"></span>
        <span class="c2"></span>
        <span class="c3"></span>
        <span class="c4"></span>
    </div>
    <div class="bottom">
        <span class="c4"></span>
        <span class="c3"></span>
        <span class="c2"></span>
        <span class="c1"></span>
    </div>
</div>

下图分别是网页放大4倍的效果图：

图一：左边的是用CSS2.0模拟出来的圆角，里面的每个锯齿都是一个span（块），而右边是利用CSS3.0制作出来的。

图二：左边的是用CSS2.0模拟出来的圆角，里面的每个锯齿都是一个span（块），右边是利用作图工具制作出来的，若做圆角，需采用背景图的形式。

由上面的图片对比，可知CSS3.0制作出的圆角最为平滑，其次是作图工具，最后才是css2.o。若为了追求页面大小和制作方便，又想兼容各大浏览器，虽然代码量也增多了，但在打造圆角方面，也不失为一种方法。