圆角框的兑现
圆角框的实现研究了一下用CSS实现一个圆角框的原理，自己随意写了一个简单的实现。代码如下：其实它的实现原
圆角框的实现
研究了一下用CSS实现一个圆角框的原理，自己随意写了一个简单的实现。代码如下：
其实它的实现原理比较简单，是通过元素堆起来的，一个圆角框其实是由三个大的部分组成的，如下图所示：我们可以看到中间红色的矩形区域，这是其中的一部分，另外两部分是被红色区域所分隔开的上、下两个部分。
这3个部分分别对应着html代码中的如下三个片断：
很明显，上下两个部分都是通过一根一根长短不一的“棒子”堆成的。由于我设置了它们的高度为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>
