用CSS实现圆角框

CSS圆角进化论
新手画小像素—基本线条
超圆滑圆角框的半完美解决方案
纯CSS圆角框

实例HTML部分：

    <div class="sharp color1">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
        <div class="content">
              <h3>纯css圆角框换肤方案一</h3>
              <div>这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容所有浏览器，无HACK。
              </div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
    </div>
</div>```

实例CSS部分：
```*{margin:0;padding:0;font-size:12px;}
.wrapper{width:80%;margin:0 auto;}
/*容器宽度值*/
.sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:180px;}
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}
a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}

/*上圆角框通用设置样式*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
/*背景色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}```