样例，上面是两个圆角Box。 - <!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>
- <title> New XHTML Document </title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="generator" content="editplus" />
- <meta name="author" content="cjx" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <style type="text/css">
- .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
- .b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
- .b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
- .bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
- .bt {background: #EDF7FF;margin:0 2px;padding:5px;}
- .bb {background: #FFFFFF;margin:0 2px;padding:5px;}
- /**另一种颜色*/
- .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
- .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/
- .bb3{background: #E7F9E3;}/*标题背景颜色*/
- </style>
- </head>
- <body>
- <b class="b1"></b><b class="b2"></b><b class="b3"></b>
- <div class="bc">
- <div class="bt ">标题</div>
- <div class="bb">
- 圆角三边 这里是内容
- </div>
- </div>
- <b class="b3"></b><b class="b2"></b><b class="b1"></b>
- <hr/>
- <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>
- <div class="bc bb2">
- <div class="bt bb3">另一种颜色</div>
- <div class="bb">
- 另一种颜色 这里是内容
- </div>
- </div>
- <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
- </body>
- </html>
这里是三个厚度的圆角，如果需要再圆角大一点，b这个标记多放一个，也就是多一个象素的圆角出来了。
如果要拷到新的地方使用，只要像
- /**另一种颜色*/
- .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
- .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
- .bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。
谢谢大家关注补充一下：
- .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
- 改成下面的，写处详细一点，FF就能显示了边框了，失误。
- .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/
- 原文地址：
相关资料：