根据google的analytics界面分析整理,个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观,但是可以随意设置圆角矩形的宽度及高度,很灵活。
不知为什么google用了b元素,有点奇怪。
页面源码:
效果(编辑调试浏览器IE7):
不知为什么google用了b元素,有点奇怪。
页面源码:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
- <title></title>
- <styletype="text/css">
- html,body{
- font-size:12px;
- }
- .round_border,.round_borderb{
- display:block;
- text-align:center;
- }
- .round_border_layer3,.round_border_layer2,.round_border_layer1,
- .round_border_content{
- border:1pxsolid#c4c4c4;
- border-width:01px01px;
- height:1px;
- overflow:hidden;
- }
- .round_border_layer3{
- margin:03px;
- background:#c4c4c4;
- }
- .round_border_layer2{
- margin:02px;
- }
- .round_border_layer1{
- margin:01px;
- }
- .round_border_content{
- height:300px;
- padding:3px6px;
- }
- /*onlyforbetterappearance,notnecessary,http://wallimn.iteye.com*/
- .round_border_layer2,.round_border_layer1{
- border-color:#d3d4d5;
- }
- /*******************controlbar**********************/
- .controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
- .controlbar_border_content{
- background:#e9e9e9;
- height:1px;
- overflow:hidden;
- }
- .controlbar_border_layer3{
- margin:03px;
- }
- .controlbar_border_layer2{
- margin:02px;
- }
- .controlbar_border_layer1{
- margin:01px;
- }
- .controlbar_border_content{
- height:20px;
- padding:01em;
- line-height:20px;
- vertical-align:middle;
- }
- /*onlyforbetterappearance,notnecessary,http://wallimn.iteye.com*/
- .controlbar_border_layer1,..controlbar_border_layer2{
- border-color:#f2f2f2;
- }
- </style>
- </head>
- <body>
- <divstyle="width:260px;">
- <bclass="round_border">
- <bclass="round_border_layer3"></b>
- <bclass="round_border_layer2"></b>
- <bclass="round_border_layer1"></b>
- </b>
- <divclass="round_border_content">
- <bclass="round_border">
- <bclass="controlbar_border_layer3"></b>
- <bclass="controlbar_border_layer2"></b>
- <bclass="controlbar_border_layer1"></b>
- </b>
- <divclass="controlbar_border_content">
- 隔壁CSS
- </div>
- <bclass="round_border">
- <bclass="controlbar_border_layer1"></b>
- <bclass="controlbar_border_layer2"></b>
- <bclass="controlbar_border_layer3"></b>
- </b>
- </div>
- <bclass="round_border">
- <bclass="round_border_layer1"></b>
- <bclass="round_border_layer2"></b>
- <bclass="round_border_layer3"></b>
- </b>
- </div>
- </body>
- </html>
效果(编辑调试浏览器IE7):
