<html>
<head>
<style>
#a{
width:300px;
height:50px;
}
.rcc{padding-bottom:10px;float:left}
#rc1{background-color:#c3d9ff;text-align:left;width:977px}
#rc1 #rd0{float:left;margin-top:3px;padding-right:3px;line-height:18px}
#rc1 a:hover{text-decoration:underline}
#rc1 #rd1{float:left;margin-top:5px;line-height:18px}
#rc1 #rd1 a{color:#000}
.w{overflow:hidden;background:#fff}
.l{float:left}.r{float:right}
.c{clear:both}
.t{width:4px;height:1px}
.o{width:2px;height:1px}
.p{width:1px;height:2px}
.d{padding:2px 10px 5px 10px}
#rc1 #rd2{float:right;margin-top:3px!important;margin-top:5px;text-align:right;line-height:18px}
#rc1 #rd2 a{color:#000}
#rc2{background:#c3d9ff;text-align:left;width:184px}#rc2 a:hover{text-decoration:underline}
#rc2 span div{float:left;font-weight:bold;line-height:2em;height:2em;color:#565b78}
#rc2 div div{float:left;background:#fff;text-align:center;width:174px;margin-left:2px!important;margin-left:1px}
#rc2 div div div{text-align:center;padding-left:4px}#rc2 ul{float:left;margin:0;padding:0;text-indent:0}
#rc2 li{float:left;width:42px;line-height:2em;height:2em;text-align:left;border-bottom:1px solid #E3EDFF;overflow:hidden}
#rc2 .nb{border-bottom:none}
</style>
</head>
<body>
<div id="rc1">
<div class="w t l"></div>
<div class="w t r"></div>
<div class="c"></div>
<div class="w o l"></div>
<div class="w o r"></div>
<div class="c"></div>
<div class="w p l"></div>
<div class="w p r"></div>
<div class="c"></div>
<div id="rd2"></div>
<div class="c"></div>
<div class="w p l"></div>
<div class="w p r"></div>
<div class="c"></div>
<div class="w o l"></div>
<div class="w o r"></div>
<div class="c"></div>
<div class="w t l"></div>
<div class="w t r"></div>
</div>
</body>
</html>
实现效果：
还有IE有个自带圆角效果标记：
<fieldset style="width: 98%;">
<legend class="title">标题</legend>
</fieldset>
这个也同样可以实现，效果更佳炫丽,但是浏览器支持有限!