根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。
不知为什么google用了b元素，有点奇怪。
页面源码：
Html代码 
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
- <title></title>
- <style type="text/css">
- html,body{
- font-size:12px;
- }
- .round_border,.round_border b{
- display:block;
- text-align:center;
- }
- .round_border_layer3,.round_border_layer2,.round_border_layer1,
- .round_border_content{
- border:1px solid #c4c4c4;
- border-width:0 1px 0 1px;
- height:1px;
- overflow:hidden;
- }
- .round_border_layer3{
- margin:0 3px;
- background:#c4c4c4;
- }
- .round_border_layer2{
- margin:0 2px;
- }
- .round_border_layer1{
- margin:0 1px;
- }
- .round_border_content{
- height:300px;
- padding:3px 6px;
- }
- /*only for better appearance, not necessary, http://wallimn.iteye.com*/
- .round_border_layer2,.round_border_layer1{
- border-color:#d3d4d5;
- }
- /*******************control bar**********************/
- .controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
- .controlbar_border_content{
- background:#e9e9e9;
- height:1px;
- overflow:hidden;
- }
- .controlbar_border_layer3{
- margin:0 3px;
- }
- .controlbar_border_layer2{
- margin:0 2px;
- }
- .controlbar_border_layer1{
- margin:0 1px;
- }
- .controlbar_border_content{
- height:20px;
- padding:0 1em;
- line-height:20px;
- vertical-align:middle;
- }
- /*only for better appearance, not necessary, http://wallimn.iteye.com*/
- .controlbar_border_layer1,..controlbar_border_layer2{
- border-color:#f2f2f2;
- }
- </style>
- </head>
- <body>
- <div style="width:260px;">
- <b class="round_border">
- <b class="round_border_layer3"></b>
- <b class="round_border_layer2"></b>
- <b class="round_border_layer1"></b>
- </b>
- <div class="round_border_content">
- <b class="round_border">
- <b class="controlbar_border_layer3"></b>
- <b class="controlbar_border_layer2"></b>
- <b class="controlbar_border_layer1"></b>
- </b>
- <div class="controlbar_border_content">
- 隔壁CSS
- </div>
- <b class="round_border">
- <b class="controlbar_border_layer1"></b>
- <b class="controlbar_border_layer2"></b>
- <b class="controlbar_border_layer3"></b>
- </b>
- </div>
- <b class="round_border">
- <b class="round_border_layer1"></b>
- <b class="round_border_layer2"></b>
- <b class="round_border_layer3"></b>
- </b>
- </div>
- </body>
- </html>
效果（编辑调试浏览器IE7）：
