纯CSS圆角,真的是很完美,方法也很简单,并且自己可以随意改变圆角弧度大小。
HTML------------------------------------------------------------------------------
<div id="all">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<div class="content"></div>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</div>
CSS--------------------------------------------------------------------------------
#all{width:400px;}
.content{ height:200px; }
b{display:block; overflow:hidden; height:1px;}
.r1{margin:0 4px; background:#ff6600;}
.r2,.r3,.r4,.content{border-left:1px solid #ff6600; border-right:1px solid #ff6600; clear:both;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px;}
HTML------------------------------------------------------------------------------
<div id="all">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<div class="content"></div>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</div>
CSS--------------------------------------------------------------------------------
#all{width:400px;}
.content{ height:200px; }
b{display:block; overflow:hidden; height:1px;}
.r1{margin:0 4px; background:#ff6600;}
.r2,.r3,.r4,.content{border-left:1px solid #ff6600; border-right:1px solid #ff6600; clear:both;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px;}