研究了一下用CSS实现一个圆角框的原理，自己随意写了一个简单的实现。代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.xb1,.xb2,.xb3,.xb4,.xb5,.xb6,.xb7{display:block;font-size:0; height:1px;background:#7f7f9c}
.xb1{margin:0 8px;}
.xb2{margin:0 6px;}
.xb3{margin:0 4px;}
.xb4{margin:0 3px;}
.xb5{margin:0 2px;}
.xb6{margin:0 2px;}
.xb7{margin:0 1px;}
#content{background:#7f7f9c;border:3px solid #7f7f9c;}
#xbox{width:500px;height:200px;background:red;margin:15px; padding:30px;}
</style>
</head>
<body>
<div id="xbox">
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
<b class="xb5"></b>
<b class="xb6"></b>
<b class="xb7"></b>
<div id = "content">
<p>用css实现的圆角框</p>
<p>用css实现的圆角框</p>
<p>用css实现的圆角框</p>
</div>
<b class="xb7"></b>
<b class="xb6"></b>
<b class="xb5"></b>
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
<div>
</body>
</html>效果图如下：
其实它的实现原理比较简单，是通过元素堆起来的，一个圆角框其实是由三个大的部分组成的，如下图所示：我们可以看到中间红色的矩形区域，这是其中的一部分，另外两部分是被红色区域所分隔开的上、下两个部分。
这3个部分分别对应着html代码中的如下三个片断：
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
<b class="xb5"></b>
<b class="xb6"></b>
<b class="xb7"></b>
<div id = "content">
<p>用css实现的圆角框</p>
<p>用css实现的圆角框</p>
<p>用css实现的圆角框</p>
</div>
<b class="xb7"></b>
<b class="xb6"></b>
<b class="xb5"></b>
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
接下来就是采用CSS来实现圆角的效果。在实现之前我们先来揭开圆角的面纱。下图是我修改了CSS后的夸张效果：
很明显，上下两个部分都是通过一根一根长短不一的“棒子”堆成的。由于我设置了它们的高度为3px，即“棒子的厚度”，事实上在代码中我们设置它们的高度是1px,所以肉眼看上去感觉就是一个圆角，如果仔细观察，我们会发现这个圆角是有锯齿的。
从代码中可以看出，我们通过7个<b>标签来实现了这个效果，我们假设这是7根水平堆积的“棒子”，我们通过height属性来设置它的厚度，通过margin属性来设置它们的长度和与相邻“棒子”之间的距离。由于当margin的值有2个的时候，前一个表示上下的距离，后一个表示左右的距离，所以效果是：7根“棒子“在上下方向上是紧挨的（因为其值为0），在左右方向上，由于设置的值不同（递增或递减），呈现的是阶梯状的。当这些效果弱化的时候，就呈现出圆角状了。
对于中间的矩形区域，则只须设置其左右边框，使之与上下两个圆角连接起来就可以了。这个区域也正是圆角边框的内容区域。
最后，需要注意设置的是背景色，通过将这些元素设置相同的背景色，就可以让人感觉到这是一个完整的圆角边框，而不是通过拼接而成的。
最后附加一个用V标签实现的圆角框，不过它只兼容IE。
<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:relative;width:200;height:100px">
<p>V标签实现的圆角框</p>
</v:RoundRect>
</body>
</html>