CSS实现图片圆角Box

方法一

原理：左圆角和中间部分左浮动，右圆角右浮动，将这三者包含在一个div中，这个大的div 平铺中间部分的图片。

Html代码如下：

<span style="font-family:Microsoft YaHei;"><div class="floatMethod">
<div class="left"></div>
<div class="middle">all</div>
<div class="right"></div>
</div></span>

CSS为：

<span style="font-family:Microsoft YaHei;">.floatMethod{
width:350px;
height:32px;
background:url('roundBox_middle.gif') left top repeat-x;
}
.floatMethod .middle{
float:left;
line-height:32px;
padding:0 0 0 10px;
}
.floatMethod .left{
float:left;
width:6px;
height:32px;
background:url('roundBox_left.gif') left top no-repeat;
}
.floatMethod .right{
float:right;
width:8px;
height:32px;
background:url('roundBox_right.gif') left top no-repeat;
}</span>

方法二

原理：左圆角左浮动，右圆角右浮动，中间部分直接在整个Box部分平铺，然后利用margin 挤压使得俩个圆角留白处可以透明处下面的背景。

Html代码如下：

<span style="font-family:Microsoft YaHei;"><div class="newFloatMethod">
<div class="left"></div>
<div class="right"></div>
<div class="middle">左右浮动法</div>
</div></span>

CSS代码如下：

<span style="font-family:Microsoft YaHei;">.newFloatMethod{
width:350px;
height:32px;
}
.newFloatMethod .middle{
line-height:32px;
margin:0 8px 0 6px;
padding:0 0 0 10px;
background:url('roundBox_middle.gif') left top repeat-x;
}
.newFloatMethod .left{
float:left;
width:6px;
height:32px;
background:url('roundBox_left.gif') left top no-repeat;
}
.newFloatMethod .right{
float:right;
width:8px;
height:32px;
background:url('roundBox_right.gif') left top no-repeat;
}</span>