实现圆角的两种方式

第一种：用背景图片利用css-sprites技术把4个小圆角拼合到一张小图里

图片：

css：

.box{border:1px solid #069; position: relative;}
.tl,.tr,.bl,.br{width:6px; height:6px; display:inline-block; position:absolute; background:url(images/bg_co1.gif);}
.tl{top:-1px; left:-1px;}
.tr{top:-1px; right:-1px; background-position:0 -6px;}
.bl{bottom:-1px; left:-1px; background-position:0 -12px;}
.br{bottom:-1px; right:-1px; background-position:0 -18px;}

 

Dom：

<div class="box">
<span class="tl"></span><span class="tr"></span>
<div class="main">
  <p>这里是主要内容</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>

 

第二种：利用纯css实现圆角

css：

.box{
    width:300px;
}
.box .b1,.box .b2,.box .b3,.box .b4,.box .b5,.box .b6,.box .b7,.box .b8{
    height:1px;overflow:hidden; display:block;
}
.box .b1,.box .b8{
    background:#dedede;
    margin:0 5px;
}
.box .b2,.box .b7{
    background:#fff;
    margin:0 3px;
    border-left:2px solid #dedede;
    border-right:2px solid #dedede;
}
.box .b3,.box .b6{
    background:#fff;
    margin:0 2px;
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;
}
.box .b4,.box .b5{
    background:#fff;
    margin:0 1px;
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;
}

.maintxt{
    border-left:1px solid #dedede;border-right:1px solid #dedede;background:#fff; height:300px;
}

 

DOM：

<div class="box">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="maintxt"></div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>