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

　　今天看了下Think的圆角矩形的div＋css实现法。他大致是这样做的。

　　根据margin的边距一点一点累加，或者累减。相对实现起来效果还算不错！就练习，研究了一下～

 

　　html part

 

<!-- round main -->

	<div id="round">

    	

                <!-- r_top --->

                <div class="r_top">

                        <em class="r_a"></em>

                        <em class="r_b"></em>

                        <em class="r_c"></em>

                        <em class="r_d"></em>

                </div>

                 <!-- //r_top  end --->

                 

                    <!-- r_box --->

                <div class="r_box">

                    这是一个圆角矩形!<br />

                    这是一个圆角矩形!<br />

                    这是一个圆角矩形!<br />

                    这是一个圆角矩形!<br />

                    这是一个圆角矩形!<br />

                    这是一个圆角矩形!<br />

                </div>

                 <!-- //r_box  end --->

                 

                   <!-- r_bottom --->

                <div class="r_bottom">

                         <em class="r_d"></em>

                        <em class="r_c"></em>

                        <em class="r_b"></em>

                        <em class="r_a"></em>

               

                </div>

                   <!-- //r_bottom  end--->

           

           

    </div>

    <!-- // round main end-->

 

 

 

　　 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;

}