圆角矩形的CSS制作方法

我们在网页的制作过过程中，经常会看到圆角矩形，我们一般的做法是把圆角做成图片，但也可以用css方法实现，原理是用div模拟成矩形。
代码1

<style type="text/css">


.bigbox{ width:300px; height:50px; }


.box1{height:1px; overflow:hidden; background:green; margin:0;}


.box2{height:1px; overflow:hidden; background:green; margin:0 1px}


.box3{height:1px; overflow:hidden; background:green; margin:0 2px}


</style>

<div class="bigbox">
<div class="box3"></div>


<div class="box2"></div>


<div class="box1"></div>


<div id="box">上面三条线，下面三条线，相邻线和线宽度想差2px</div>


<div class="box1"></div>
<div class="box2"></div>

<div class="box3"></div>


</div>

ok,看明白了吧，下面看看实际效果如何:

圆角矩形实现了，如果按上面的方法我们只能做一个带背景颜色的圆角矩形，如何做一个圆角边框矩形呢？往下看
代码2

<style type="text/css">

 #bigbox{ width:300px; height:50px; color:#fff}


.box4{height:1px; overflow:hidden;  margin:0; margin:0 1px;border-style:solid; border-width:0 1px; border-color:green }

 .box5{height:1px; overflow:hidden; margin:0 1px;border-style:solid; border-width:0 1px; border-color:green}

 .box6{height:1px; overflow:hidden;  margin:0 2px;background:green}


</style>


<div class="bigbox">


<div class="box6"></div>

 <div class="box5"></div>


<div class="box4"></div>


<div style="height:50px; color:green;border-style:solid;border-width:0 1px; border-color:#000">这就是圆角边框</div>


<div class="box4"></div>


<div class="box5"></div> 

<div class="box6"></div>


</div>