<div class="newFloatMethod">
<div class="left"></div>
<div class="right"></div>
<div class="middle">左右浮动法</div>
</div>
CSS代码如下：
CSS Code复制内容到剪贴板
.newFloatMethod{width:350px; height:32px;}
.newFloatMethod .middle{line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url(‘images/roundBox_middle.gif’) left top repeat-x;}
.newFloatMethod .left{float:left; width:6px; height:32px; background:url(‘images/roundBox_left.gif’) left top no-repeat;}
.newFloatMethod .rightright{float:rightright; width:8px; height:32px; background:url(‘images/roundBox_right.gif’) left top no-repeat;}
优点：简单、易上手。
缺点：需要清除浮动。
原理简析：左圆角左浮动，右圆角右浮动，主体直接放后面。
3.滑动门法
滑动门法是一种比较巧妙的方法，使用一个内嵌标签，外部标签为左圆角，内嵌的标签包含了背景与右圆角。要求切图要按照特定的方式切出，切图的图片同浮动法不同。缺点就是对CSS掌握要求比较高，切图也有特定的要求，且要注意宽度，尽量的让图片足够的长，防止宽度不够图片掉出情况发生。
HTML代码如下：
CSS Code复制内容到剪贴板
<div class="slidingDoorMethod">
<div class="inner">滑动门法</div>
</div>
CSS代码如下：
CSS Code复制内容到剪贴板
.slidingDoorMethod{width:350px; height:32px; background:url(‘images/roundBox_left.gif’) left top no-repeat;}
.slidingDoorMethod .inner{line-height:32px; margin:0 0 0 6px; padding:0 0 0 10px; background:url(‘images/roundBox_slidingDoor_right.gif’) rightright top no-repeat;}
优点：代码精简、自由度大。
缺点：CSS要求较高、滑动门切图要求多。
原理简析：使用一个内嵌标签，外部标签为左圆角，内嵌的标签包含了背景与右圆角。
4.负Margin法
负Margin 法是我比较喜欢的一种方法，简单合理，开发效率高。主要利用负Margin 技术让俩个div 重叠，“挤”出俩个圆角，实现出图片圆角效果。
HTML代码如下：
XML/HTML Code复制内容到剪贴板
<div class="negativeMarginMethod">
