用纯CSS实现圆角边框

网页里面很多圆角边框在实现时，为了简单方便，都是用背景图的方式实现的，但这并不是一个好方法，因为背景图会增大向服务器请求资源的次数及数据流量，在网上看了些参考资料，自己改进了一下，做了两个纯CSS的圆角边框，有需要的朋友可以直接拿过去用：

做出来的效果图如下所示：

 

以下为代码部分：

在HTML文件中：

<div id="outK">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div id="inK">
fdaagadfasdfasfasfasfasfasdfasdfadf
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

<div id="outK2">
<b class="c1"></b><b class="c2"></b><b class="c3"></b><b class="c4"></b>
<div id="title">这里是标题</div>
<div id="inK2">这里是内容</div>
<b class="c5"></b><b class="c6"></b><b class="c7"></b><b class="c8"></b>
</div>
在CSS文件中：

/*第一个绿色圆角的实现CSS样式*/

/*指定整个区域的大小，可用高度为指定高度减10*/
#outK{width:500px; height:20px;}
.b1,.b2,.b3,.b4{height:1px; overflow:hidden; display:block; font-size:1px;}
.b1{margin:0 5px; }
.b2{margin:0 3px; border-right:solid 2px; border-left:solid 2px; }
.b3{margin:0 2px; border-right:solid 1px; border-left:solid 1px; }
.b4{margin:0 1px; height:2px; border-right:solid 1px; border-left:solid 1px; }
/*区域内的字体等在此定义*/
#inK{border-right:solid 1px; border-left:solid 1px;height:100%;padding:0 10px;color:yellow;}
/*在下面指定边框的颜色*/
#outK .b1,#outK .b2,#outK .b3,#outK .b4,#inK{ border-color:#000; }
#outK .b1{ background:#000; }
/*在下面指定区域的底色*/
#outK .b2,#outK .b3,#outK .b4,#inK{ background:green;}

 

/*第二个带标题与内容的圆角区的实现*/

/*外框大小指定*/
#outK2{ width:200px; height:210px; margin:15px 3px;}
/*构建圆角框*/
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{height:1px; overflow:hidden; display:block;}
.c1,.c8{ margin:0 5px;}
.c2,.c7{ margin:0 3px; border-left:solid 2px; border-right:solid 2px; }
.c3,.c6{ margin:0 2px; border-left:solid 1px; border-right:solid 1px; }
.c4,.c5{ margin:0 1px; border-left:solid 1px; border-right:solid 1px; height:2px; }
#title,#inK2{ border-left:solid 1px; border-right:solid 1px; }
/*在此指定外边框的颜色*/
.c2,.c3,.c4,.c5,.c6,.c7,#title,#inK2{ border-color:#09C; }
.c1,.c8{ background:#09C; }
/*在此指定标题行背景色*/
.c2,.c3,.c4,#title{ background:#99FFFF; }
/*在此指定内容区的背景色*/
#inK2,.c5,.c6,.c7{ background:#FFCCFF; }
/*标题与内容样式指定*/
#title{ height:14px; padding:3px 10px 7px 10px; font-size:14px; font-weight:bold; color:red; }
#inK2 { height:166px; padding:5px; font-size:14px; color:#333; }