div+css无图片实现圆角矩形
在做页面的时候，很多时候会用圆角矩形来妆点一下，但如果用图片的话，即要用到图片又要用到大量的代码，势必增加了页面的重量
在页面的时候刚好要用到圆角矩形，于是写了以下方法，分享一下
以下为引用的内容：
<!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>div+css无图片实现圆角矩形</title>
<style type="text/css">
<!--
.RoundedCorner{background:url(../images/loginBg2.gif) 0 0 repeat-x;}
b.rtop, b.rbottom{display:block;background:#ffffff;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;}
b.r1{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;}
b.r2{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -3px repeat-x;}
b.r3{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background:url(../images/loginBg2.gif) 0 -2px repeat-x;}
.content{border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}
b.r8{margin: 0 3px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;background: #DBDBDB;}
b.r7{margin: 0 2px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}
b.r6{margin: 0 1px;border-left:1px #DBDBDB solid;border-right:1px #DBDBDB solid;}
-->
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
</b>
<div class="content">内容...</div>
<b class="rbottom">
<b class="r6"></b>
<b class="r7"></b>
<b class="r8"></b>
</b>
</div>
</body>
</html>