不用切图的页面圆角

最近由于工作一直在接触div+css布局方面的东西，也确实学到了很多。记得以前不懂css布局的时候，在给系统设计效果图时，总有人提醒说“尽量不要圆角，需要切图”“这样设计代码不好实现”云云，前日和ami在讨论她的主页设计时，发现只用代码就可以设计出圆角的效果，好神奇啊～！首先，感谢ami分享，接着我来和大家分享

首先看样式表文件：
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; 
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的

在上面两句之间加上一个左右border的content
这就是效果了：




是不是很不错呢，来仔细分析一下代码吧：



好不容易才做好这张图，也不知道怎么表现更加清楚，我相信大家应该能看得懂吧，原理就是在象素做图。是不是很有意思呢～css的功能真的好强大啊，明白原理后就能举一反三设计出许多样式了，让我们大胆的设计出各种效果吧，坚信css能实现的，还有许多的效果，推荐大家到这个站点去看看： http://www.cssplay.co.uk/index.html 这个也是ami推荐的呢?