推荐纯CSS圆角框，网页不使用图片实现圆角框效果

在网上有好多关于CSS实现圆角框的文章，不过他们都是CSS+背景图片实现，而本文完全是纯CSS实现圆角框哦。
实现原理：
纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

图1

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。
1、Html结构层：

Code [http://www.xueit.com]

1<div class="sharp color1">
2       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
3       <div class="content">文字内容</div>
4       </div>
5       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
6</div>

b1~b4构成上面的左右两个圆角结构体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全部放在一个大的容器中，并给它的一个类名sharp，用来设置通用的样式。再给它叠加了一个color1类名，这个类名用来区别不同的颜色方案，因为可能会有不同颜色的圆角框。

2、CSS样式：

Code [http://www.xueit.com]

1.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{}{height:1px; font-size:1px; overflow:hidden; display:block;}
2.b1,.b8{}{margin:0 5px;}
3.b2,.b7{}{margin:0 3px;border-right:2px solid; border-left:2px solid;}
4.b3,.b6{}{margin:0 2px;border-right:1px solid; border-left:1px solid;}
5.b4,.b5{}{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

将每个b标签都设置为块状结构，并定义其高度为1像素，超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置，是从大到小减少的。而b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样，只是顺序是相对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式，但是在这儿并没有设置边框的颜色，这是为什么呢，因为这个边框颜色是我们需要适时变化，所以将它们分离出来，在下面的代码中单独定义。

接下我们设置内容区的样式：

Code [http://www.xueit.com]

.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只设置左右边框线，但是不设置颜色值，它和上面八个b标签一起构成圆角框的外边框轮廓。
往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计制作不同的换肤方案呢，答案是有的。在我的这个应用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。