使用Div+CSS纯图片实现圆角矩形的方法小结

  <div class="topLeft"></div>  
  <div class="topRight"></div>  
  <div class="title">负Margin法</div>  
</div>  

CSS代码如下：

CSS Code复制内容到剪贴板

.negativeMarginMethod{width:350px; height:32px;}   
.negativeMarginMethod .topLeft{height:5px; _overflow:hidden; background:url(‘images/roundBox_negativeMargin.gif’) left top no-repeat;}   
.negativeMarginMethod .topRight{height:5px; _overflow:hidden; margin:-5px 0 0 5px; background:url(‘images/roundBox_negativeMargin.gif’) rightright top no-repeat;}   
.negativeMarginMethod .title{line-height:28px; padding:0 0 0 15px; background:url(‘images/roundBox_middle.gif’) left top repeat-x;}  

优点：简单直接，开发效率高。
缺点：需理解负Margin 用法，特定的切图方式。
原理简析：主要利用负Margin 技术让俩个div 重叠，“挤”出俩个圆角，实现出图片圆角效果。

5.负左Margin法
这个负左Margin法是我自己瞎琢磨出来的，代码有点风骚，这里纯粹当做一个新的思路放上来，对IE6似乎有点小缺陷，但只要知道固定宽度也能够兼容。主要原理就是三个div 一起浮动，主体放前面，俩个圆角利用负左margin 让他覆盖到相应的位置。
HTML代码如下：

XML/HTML Code复制内容到剪贴板

<div class="negativeMarginLeftMethod">  
  <div class="inner">  
    <div class="title">负左Margin法</div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>  

CSS代码如下：

CSS Code复制内容到剪贴板

.negativeMarginLeftMethod{width:350px; height:32px;}   
.negativeMarginLeftMethod .left{float:left; width:6px; height:32px; margin:0 0 0 -100%; _margin:0 0 0 -350px;  background:url(‘images/roundBox_left.gif’) left top no-repeat;}   
.negativeMarginLeftMethod .rightright{float:left; width:8px; height:32px; margin:0 0 0 -8px; background:url(‘images/roundBox_right.gif’) left top no-repeat;}   
.negativeMarginLeftMethod .inner{float:left; width:100%; line-height:32px; }   
.negativeMarginLeftMethod .title{margin:0 8px 0 6px; padding:0 0 0 10px; background:url(‘images/roundBox_middle.gif’) left top repeat-x;}