.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999border-right:1px solid #999}
.b1,.b1b{margin:0 5pxbackground:#999}
.b2,.b2b{margin:0 3pxborder-width:2px}
.b3,.b3b{margin:0 2px}
.b4,.b4b{height:2pxmargin:0 1px}
.d1{background:#F7F8F9}页面代码:<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
<font style="font-size:26pxcolor:redmargin:0px 10px">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>样式2：3D效果css圆角矩形css代码：.raised{background:transparentwidth:40%}
.raised h1,.raised p{margin:0 10px}
.raised h1{font-size:2emcolor:#fff}
.raised p{padding-bottom:0.5em}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:blockoverflow:hiddenfont-size:1px}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px}
.raised .b2{background:#cccborder-left:1px solid #fffborder-right:1px solid #eee}
.raised .b3{background:#cccborder-left:1px solid #fffborder-right:1px solid #ddd}
.raised .b4{background:#cccborder-left:1px solid #fffborder-right:1px solid #aaa}
.raised .b4b{background:#cccborder-left:1px solid #eeeborder-right:1px solid #999}
.raised .b3b{background:#cccborder-left:1px solid #dddborder-right:1px solid #999}
.raised .b2b{background:#cccborder-left:1px solid #aaaborder-right:1px solid #999}
.raised .b1{margin:0 5pxbackground:#fff}
.raised .b2, .raised .b2b{margin:0 3pxborder-width:0 2px}
.raised .b3, .raised .b3b{margin:0 2px}
.raised .b4, .raised .b4b{height:2pxmargin:0 1px}
.raised .b1b{margin:0 5pxbackground:#999}
.raised .boxcontent{display:blockbackground:#cccborder-left:1px solid #fffborder-right:1px solid #999}
页面代码：<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>样式3：略带菱形的css圆角矩形css代码：.curved {
background:transparent
width:40%
}
.curved h1, .curved p {
margin:0 10px
}
.curved h1 {
font-size:2em
color:#fff
}
.curved p {
padding-bottom:0.5em
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
display:block
overflow:hidden
height:1px
font-size:1px
}
.curved .b2, .curved .b3, .curved .b4 {
background:#e0cea3
border-left:1px solid #fff
border-right:1px solid #fff
}
.curved .b1 {
margin:0 4px
background:#fff
}
.curved .b2 {
margin:0 4px
height:2px
}
.curved .b3 {
margin:0 3px
}
.curved .b4 {
margin:0
height:1px
border-width:0 3px 0 3px
}
.curved .boxcontent {
display:block
background:#e0cea3
border:0 solid #fff
border-width:0 1px
}页面代码：<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>样式4 特殊css圆角矩形 css代码：.pillar {
background:transparent
width:40%
}
.pillar h1, .pillar p {
margin:0 10px
}
.pillar h1 {
font-size:2em
color:#fff
}
.pillar p {
padding-bottom:0.5em
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
display:block
overflow:hidden
font-size:1px
}
.pillar .b1, .pillar .b2, .pillar .b4 {
height:1px
}
.pillar .b2, .pillar .b3 {
background:#d66
border-left:1px solid #fff
border-right:1px solid #fff
}
.pillar .b4 {
background:#d66
border-left:4px solid #fff
border-right:4px solid #fff
}
.pillar .b1 {
margin:0 2px
background:#fff
}
.pillar .b2 {
margin:0 1px
border-width:0 1px
}
.pillar .b3 {
height:2px
margin:0
}
.pillar .b4 {
margin:0 2px
}
.pillar .boxcontent {
display:block
background:#d66
border-left:1px solid #fff
border-right:1px solid #fff
margin:0 5px
}页面代码：<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>样式5 ：反向css圆角矩形css代码：.serif {
background: transparentwidth:40%
}
.serif h1, .serif p {
margin:0 10px
}
.serif h1 {
font-size:2emcolor:#fff
}
.serif p {
padding-bottom:0.5em
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {
display:block
overflow:hidden
font-size:1px
}
.serif .b1, .serif .b2, .serif .b3 {
height:1px
}
.serif .b2, .serif .b3 {
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
}
.serif .b4 {
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
}
.serif .b1 {
margin:0background:#fff
}
.serif .b2 {
margin:0 1px
border-width:0 2px
}
.serif .b3 {
margin:0 3px
}
.serif .b4 {
height:2px
margin:0 4px
}
.serif .boxcontent {
display:block
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
margin:0 5px
}页面代码：<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
上面的不是CSS代码只是HTML代码，下面的是CSS代。CSS代码有几种表现行式
一种是：#CSS_name，第二种是：.CSS_name,第三种是:CSS_name
第一种用在ID里面,比如：<div
id="CSS_name"></div>
第二种用在Class里面，比如：<div
class="CSS_name"></div>
第三种一般是针对标签直接定义式，比如Body{font-size14px}就应用到整个Body里面。
区别就显而易见了，一个页面不能出现两个同样的ID吧，所以用#号形式的在一个页面就只能用一次。Class当然是多次了。
