《
纯CSS圆角框：基本的圆角框》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345532013.htm
下面是源码演示后的截图：
为了演示效果，本模型的宽度值全部采取百分比实现的，你能够随便伸缩宽度，看看它是否适应弹性的变更。
2、CSS款式：
将每个b标签都设置为块状结构，并定义其高度为1像素，超越局部溢出暗藏。从上面样式中我们已经看到margin值的设置，是从大到小减少的。而b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样，只是次序是绝对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式，但是在这儿并没有设置边框的颜色，这是为什么呢，因为这个边框颜色是我们需要适时变化，所以将它们分别出来，在下面的代码中独自定义。
往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不雷同，有不可能针对不同的设计制造不同的换肤方案呢，谜底是有的。在我的这个利用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事件。下面看看我是如何将它们运用到不同的颜色的。
当初已经将一个圆角框描写出来了，然而有一个问题要留神，就是内容区的背景色，由于这儿是存载文字主体的处所。所以还须要参加下面这句话，也是群集抉择符来设置圆角内的所有背风景。
这儿除了b1和b8外，其它的标签都包含进来了，并且包含content容器，将它们的背景色全部设置一个颜色，这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包括挑选符，给它们都加了一个color1，这是颜色方案1的类名，按照这个原理可以设置不同的换肤方案。
从上面效果图中我们可以看到实在这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分辨为5px，3px，2px，1px，顺次递减。因而依据这个原理我们可以实现简单的html结构和样式。
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->1.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{}{border-color:#96C2F1;}
2.color1 .b1,.color1 .b8{}{background:#96C2F1;} 代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->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;} Tag： CSS 圆角框 CSS 圆角框
接下咱们设置内容区的样式：
也是只设置左右边框线，但是不设置颜色值，它跟上面八个b标签一起构成圆角框的外边框轮廓。
好了，我们将上面的所有代码集中起来，就实现一个纯CSS圆角框的实例模型，在源码中，我设置了六套颜色方案，其它的颜色方案就看你的了。
b1~b4形成上面的左右两个圆角构造体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全体放在一个大的容器中，并给它的一个类名sharp，用来设置通用的样式。再给它叠加了一个color1类名，这个类名用来差别不同的颜色计划，因为可能会有不同色彩的圆角框。
实现原理：
1、Html结构层：
在上面的样式设计中,纯CSS圆角框：圆角化图片，我已经给颜色方案留下了可以扩大的空间。我将所有的波及到边框色的类名全部集中在一起，用群取舍符给它们设置一个边框的颜色就可以了。如下所示：
注意：需要将这两句的颜色值设置为一样的，第二句中虽说是设置的background背景色，但它同样是高低边框线的颜色，这一点必定要记住。因为b1和b8并没有设置border，但它的高度值为1px，所以用它的背景色就到达了模仿上下边框的颜色了。
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->1<div class="sharp color1",
纯CSS圆角框3－圆角化图片;>
2 <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
3 ,
纯CSS圆角框2－透明圆角化背景图片; <div class="content">文字内容</div>
4 </div>
5 <b class="b5"></b><b class=",
纯CSS圆角框1－基本的圆角框;b6"></b><b class="b7"></b><b class="b8"></b>
6</div>
纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目宣布上线后，在保护进程中，有时需要增加一些新的需要，因为以前的名目中大批采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增添更多的额定工作，并且也不想用JS来增添更多的http恳求，所以需要一些简略的CSS方案来解决这个问题。而我的个人喜好,纯CSS图片预加载，也爱好采用无图片的方式来处置这些效果。总感到CSS能完成的工作，为什么不让它来实现呢？
--> [
网站建设之]纯CSS圆角框：基础的圆角框
图一
纯CSS方法实现圆角框的原理在网络上已经有良多人具体讲解了，下面这个示用意是我将其中的一个圆角进行放大后的后果。
图二
(责任编辑：网站建设)
纯CSS圆角框：基本的圆角框相关文章