HTML+CSS实现圆角矩形（不需要图片）——抄自GTalk

从GTalk的css模板里抠出来的东东 :P

道理其实很简单，架设矩形的圆角高度为4，那么由上到下依次是（单位px，所给出的边框宽度均为1px且颜色保持保持一致）：
高度为1，左右间隔均为5，仅有上方边框的div；
高度为1，左右间隔均为3，仅有左右边框的div；
高度为1，左右间隔均为2，仅有左右边框的div；
高度为1，左右间隔均为1，仅有左右边框的div；
左右间隔均为0，仅有左右边框的div——放置内容；
高度为1，左右间隔均为1，仅有左右边框的div；
高度为1，左右间隔均为2，仅有左右边框的div；
高度为1，左右间隔均为3，仅有左右边框的div；
高度为1，左右间隔均为5，仅有下方边框的div

废话少说，代码在此

css样式定义：




div.panel{...}{


clear:both;


}




DIV.panel DIV.b0 {...}{


height: 1px;


font-size: 1px;


overflow: hidden;


margin: 0px 5px;


border-top: 1px solid #938F5A;


}




DIV.panel DIV.b1 {...}{


height: 1px;


font-size: 1px;


overflow: hidden;


margin: 0px 5px;


border-bottom: 1px solid #938F5A;


}




DIV.panel DIV.b2 {...}{


height: 1px;


font-size: 1px;


overflow: hidden;


margin: 0px 3px;


border-left: 2px solid #938F5A;


border-right: 2px solid #938F5A;


}




DIV.panel DIV.b3 {...}{


height: 1px;


font-size: 1px;


overflow: hidden;


margin: 0px 2px;


border-left: 1px solid #938F5A;


border-right: 1px solid #938F5A;


}




DIV.panel DIV.b4 {...}{


height: 2px;


font-size: 1px;


overflow: hidden;


margin: 0px 1px;


border-left: 1px solid #938F5A;


border-right: 1px solid #938F5A;


}




div.panel div.content {...}{


border-left: 1px solid #938F5A;


border-right: 1px solid #938F5A;


padding: 0px 5px;


text-align: left;


filter: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorStr='#FFFEEA',endColorStr='#F2F4CC');




/**//*height:1px; */


background-color:#fff;


}




div.panel div.content .caption {...}{


font-weight: bold;


display: block;


border-bottom: 1px solid #CDCDCD;


margin: 0px 0px 1px 0px;


padding:5px 0 0 0;


width:100%;


}




DIV.panel DIV.t-o {...}{


background-color: #AD0910;


}




DIV.panel DIV.b-o {...}{


background-color: #F1F3CB;


}




DIV.panel DIV.clear {...}{


clear: both;


height: 1px;


overflow: hidden;


}




DIV.panel DIV.break {...}{


height: 1px;


margin: 3px 0px 0px 0px;


overflow: hidden;


}



HTML代码：


<div class="panel">


<DIV class="t-o b1"></DIV>


<DIV class="t-o b2"></DIV>


<DIV class="t-o b3"></DIV>


<DIV class="t-o b4"></DIV>


<DIV class="content">


<!-- 这里放内容 -->


<DIV class=clear></DIV>


</DIV>


<DIV class="b-o b4"></DIV>


<DIV class="b-o b3"></DIV>


<DIV class="b-o b2"></DIV>


<DIV class="b-o b1"></DIV>


<DIV class="break"></DIV>


</div>