在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目揭晓上线后，在维护流程中，有时须要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不添加更多的额外工作，并且也不想用JS来添加更多的http请求，所以须要一些基本的CSS方案来处理这个疑问。而我的私人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？
　　实现原理：
　　纯CSS方式实现圆角框的原理在网络上已经有很多人细致解说了，下面这个示意图是我将其中的一个圆角执行放大后的效果。
　
　　图一
　　从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现基本的html结构和样式。
　　1、Html结构层：
　　代码
1<div　/>2　　　　　　　<b　/>3　　　　　　　<div　/>4　　　　　　　</div>
5　　　　　　　<b　/>6</div>
编缉推选阅读以下文章

• 纯CSS圆角框：第四章、CSS圆角框组件 V1.0
• 纯CSS圆角框：第三章、圆角化图片
• 纯CSS圆角框：第二章、透明圆角化背景图片

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

　　2、CSS样式：
　　代码
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样式代码的字符大小。后面三句和第二句有点不同的地点是多配置了左右边框的样式，但是在这儿并没有配置边框的颜色，这是为什么呢，因为这个边框颜色是我们须要适时变化，所以将它们分离出来，在下面的代码中单独定义。
　　接下我们配置内容区的样式：
　　代码
.content　{border-right:1px　solid;border-left:1px　solid;overflow:hidden;}
　　也是只配置左右边框线，但是不配置颜色值，它和上面八个b标签一起构成圆角框的外边框轮廓。
编缉推选阅读以下文章

• 纯CSS圆角框：第四章、CSS圆角框组件 V1.0
• 纯CSS圆角框：第三章、圆角化图片
• 纯CSS圆角框：第二章、透明圆角化背景图片

　　往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计打造不同的换肤方案呢，答案是有的。在我的这个运用中，可以换不同的皮肤颜色，并且配置颜色方案也并不是一件很难的事情。下面看看我是如何将它们运用到不同的颜色的。
　　在上面的样式设计中，我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起，用群挑选符给它们配置一个边框的颜色就可以了。如下所示：

　　代码
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;}
　　留心：须要将这两句的颜色值配置为一样的，第二句中虽说是配置的background背景色，但它同样是上下边框线的颜色，这一点一定要记得。因为b1和b8并没有配置border，但它的高度值为1px，所以用它的背景色就达到了模拟上下边框的颜色了。
　　现在已经将一个圆角框描述出来了，但是有一个疑问要留心，就是内容区的背景色，因为这儿是存载文字主体的地点。所以还须要参加下面这句话，也是群集挑选符来配置圆角内的所有背景色。
　　代码
.color1　.b2,.color1　.b3,.color1　.b4,.color1　.b5,.color1　.b6,.color1　.b7,.color1　.content{background:#EFF7FF;}
　　这儿除了b1和b8外，其它的标签都包含进来了，并且包括content容器，将它们的背景色全部配置一个颜色，这样除了线框外的所有地点都成为一种颜色了。在这儿我也用到包含挑选符，给它们都加了一个color1，这是颜色方案1的类名，依照这个原理可以配置不同的换肤方案。
　　好了，我们将上面的所有代码集中起来，就完成一个纯CSS圆角框的实例模型，在源码中，我配置了六套颜色方案，其它的颜色方案就看你的了。
　　下面是源码演示后的截图：
　
　　图二
　　为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。
　　本模型在以下阅读器中圆满通过：
　　IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
　　本文示例源代码或素材下载
编缉推选阅读以下文章

• 纯CSS圆角框：第四章、CSS圆角框组件 V1.0
• 纯CSS圆角框：第三章、圆角化图片
• 纯CSS圆角框：第二章、透明圆角化背景图片

读库教程网文章由网络收集后整理发布,文章发布人拥有该内容的所有权力及责任!

如果你喜欢这页，可以按Ctrl+D收藏起来。