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 >
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页