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