div+css做圆角矩形【更新版】

　　css part

	div,em{ margin:0; padding:0;}
#round{ width:500px; margin:0px 20px; }
.r_top,.r_bottom{ display:block; font-size:1px;}

.r_a,.r_b,.r_c,.r_d{ display:block; overflow:hidden; }
.r_a,.r_b,.r_c{ height:1px;}
.r_b,.r_c,.r_d{background:#CCFF66; }

.r_box{ background:#CCFF66; padding-left:10px; padding-right:10px;}

.r_a{ margin:0 5px; }
.r_b{ margin:0 3px; border-width:0 2px; }
.r_c{ margin:0 2px; }
.r_d{ height:2px; margin:0 1px; }


　　测试一下兼容性。目前还可以。还没发现什么大的问题～～。

为了更好的理解，先用简单的代码为例。

XHTML代码：

<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
CSS代码：

b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}