css中的圆角样式布局二

下面是第二种圆角样式设计，常用于段落文字或块区域的四周圆角：

 

<div id="c">
<div class="top"><b class="topl"></b><b class="topr"></b></div>
<div id="content">内容区
</div>
<div class="foot"><b class="mbcl"></b><b class="mbcr"></b></div>
</div>

 

下面是对应的样式：

 

#c{width:200px;text-align:center;margin:0 auto;background-color:#dbdbdb;}
.top, .foot{height:6px;overflow:hidden;background-color:#dbdbdb;}
.topl, .footl, .topr, .footr{float:left;width:6px;height:6px;background:url(/img/cor.png) no-repeat;}
.topl{background-position:0 0;}
.topr, .footr{float:right;}
.topr{background-position:-6px 0;}
.footl{background-position:0 -6px;}
.footr{background-position:-6px -6px;}
#content{width:188px;height:100px;background:#fff;}

 效果图如下：

 

ps：附件cor.png是圆角需要的图片。