<!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>圆角层实例</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> /*注:这里的"b"元素,不是HTML的"b"标签,只相当于一个普通DIV*/ body{ margin:20px 10px; background-color: #FFF; font:12px; } #vessel{/*容器DIV*/ 800px; background: #9BD1FA } b.rtop, b.rbottom{/*圆角矩形顶部和底部设置块状显示及背景颜色*/ display:block; background: #fff; } b.rtop b, b.rbottom b{/*设置顶部和底部组成圆角的各元素块状显示和高度为1像素,及背景颜色,overflow为了适应IE6*/ display:block; height: 1px; overflow: hidden; background: #9BD1FA } b.r1{margin: 0 5px}/*详细设置组成圆角元素长度差值,形成圆角视觉效果*/ b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px}/*圆角上半部分的最下元素和下半部分的最上元素,加高一像素为了平滑边缘*/ </style> </head> <body> <div id="vessel"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> 这里是测试文字,配合表现圆角效果!<br />亲测通过浏览器IE6,IE7,FF,Chrome <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div> </body> </html>