一直都很想写一篇关于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。若为了追求页面大小和制作方便，又想兼容各大浏览器，虽然代码量也增多了，但在打造圆角方面，也不失为一种方法。