CSS实现的圆角化图片
纯CSS3实现圆角效果（含IE兼容解决方法）
纯CSS3实现圆⾓效果（含IE兼容解决⽅法）如今，这种利⽤CSS制作圆⾓的技术已经得到了⼤多数主流浏览器的⽀持，包括Safari，⾕歌浏览器，IE，Opera和⽕狐浏览器。
下⾯让我们来看看border-radius的语法，解释，以及IE是如何⽀持它的。
语法和说明在CSS3中⽤来⽣成圆⾓效果的属性是border-radius.这个属性跟⼤家熟知的width等属性的⽤法相似：复制代码代码如下:.roundElement {border-radius: 10px;}上⾯的这句代码的作⽤是设置⼀个元素的四个⾓的弧度半径值都为10px。
你也可以对每个⾓单独指定：复制代码代码如下:.pearElement {border-top-left-radius: 7px;border-top-right-radius: 5px;border-bottom-right-radius: 6px;border-bottom-left-radius: 8px;}如果你觉得上⾯的写法太复杂，可以使⽤下⾯border-radius简写的⽅法：复制代码代码如下:.oddRoundElement {border-radius: 12px 5px 12px 5px;/* or */border-radius: 12px 5px;}四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个⾓。
各浏览器对border-radius的⽀持因为这种圆⾓技术是CSS3⾥出现的，⽼式浏览器或较早期的浏览器中⽤到这个属性时需要在CSS⾥添加浏览器引擎前缀(vendor prefixes)。
会是{prefix}-border-radius这样⼀个样⼦，⽽具体各种浏览器引擎前缀是下⾯这样的写法：复制代码代码如下:-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-border-radius: 20px;</p> <p>/* ⽕狐浏览器 */-moz-border-radius-topleft:15px; /* top left corner */-moz-border-radius-topright:50px; /* top right corner */-moz-border-radius-bottomleft:15px; /* bottom left corner */-moz-border-radius-bottomright:50px; /* bottom right corner */-moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */</p> <p>/* webkit引擎的浏览器*/-webkit-border-top-left-radius:15px; /* top left corner */-webkit-border-top-right-radius:50px; /* top right corner */-webkit-border-bottom-left-radius:15px; /* bottom left corner */-webkit-border-bottom-right-radius:50px; /* bottom right corner */基本上，你需要对每种浏览器引擎做各⾃的声明，加上这些讨厌的稍微不同的代码来保证完全⽀持border-radius。
纯代码实现CSS圆角
纯代码实现CSS圆⾓我这⾥说的是纯代码，是指的不使⽤图⽚实现圆⾓，图⽚实现圆⾓，这⾥就不说了。
纯代码实现圆⾓主要有3种⽅法：第⼀种：CSS3圆⾓#chaomao{border-radius:2px 2px 2px 2px;}上⾯代码的意思是左上、右上、右下、右下分别2px的圆⾓当然也可以简写：border-radius:2px⽅向是从左上到左下逆时针也可以分别指定#chaomao{border-top-left-radius:4px 2px;border-top-right-radius:3px 4px;border-bottom-right-radius:6px 2px;border-bottom-left-radius:3px 4px;}意思很简明⽕狐等浏览器也⽀持⾃⼰的私有圆⾓属性Firefox⽀持border-radius(圆⾓)：-moz-border-radius:2pxwebkit内核的Safari和Chrome⽀持border-radius(圆⾓)：-webkit-border-radius:2pxOpera⽀持border-radius(圆⾓)：border-radius:2pxCSS3实现圆⾓最简单了，可惜IE6-8不⽀持第⼆种：⽤CSS+html代码百度知道的⾸页圆⾓就是⽤这种⽅法实现的有点：兼容所有浏览器，缺点：需要添加额外的HTML标签，维护⽐较⿇烦实现原理是利⽤多个空层，上⾯⼀层⽐下⾯少1px，从⽽使边⾓看起来是⼀个圆弧状HTML代码：<div><strong class="b1"></strong><strong class="b2"></strong><strong class="b3"></strong><strong class="b4"></strong><div class="content">⽂字内容</div></div>CSS代码b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;font-size:1px;overflow:hidden;display:block;}.b1,.b8{margin:0 5px;}.b2,.b7{margin:0 3px;border-right:2px solid;border-left:2px solid;}.b3,.b6{margin:0 2px;border-right:1px solid;border-left:1px solid;}.b4,.b5{margin:0 1px;border-right:1px solid;border-left:1px solid;height:2px;}第三种：利⽤jQuery圆⾓插件代码实现圆⾓优点：兼容所有浏览器缺点：需要使⽤jQuery插件这是⼀个jQuery插件，使⽤的时候，需要jQuery⽂件⼀起，使⽤⽅法很简单$("#chaomao").corner("5px")它就实现了id值问哦chaomao的元素，5px的圆⾓。
CSS实现圆角的三种方法
CSS实现圆角的三种方法方法一：border-radius属性border-radius属性是CSS3引入的新属性，可以用来设置元素的圆角效果。
通过设置border-radius属性，可以将元素的边框角变为圆角。
border-radius属性的语法如下：border-radius: <length>，<percentage>，[<length>，<percentage>]{1,4}[/ <length>，<percentage>]{0,2}其中，<length>表示长度值，可以是数值或使用像素、百分比等单位。
<percentage>表示百分比值。
方括号表示可选项，花括号中的数字表示可重复的次数。
斜杠后的部分表示可选的内切椭圆半径。
例如，要给一个元素设置4个角的圆角效果，可以使用以下代码：```cssborder-radius: 10px;```此代码将元素的4个角都设置为10像素的圆角。
方法二：border-image属性border-image属性也是CSS3引入的新属性，用于将图片应用到元素的边框上，同时也可以实现圆角效果。
border-image属性的语法如下：border-image: <source>，<slice>[<width>，<outset>]?[<repeat>]?，inherit其中，<source>表示图片的路径。
<slice>表示图片的裁剪区域。
<width>表示图片的宽度。
<outset>表示边框图像区域超出边框的距离。
<repeat>表示是否重复显示边框图像。
例如，要给一个元素设置圆角效果并使用图片作为边框，可以使用以下代码：```cssborder-image: url(border.png) 30 round;```此代码将会把border.png这张图片应用到元素的边框上，并且设置一个30像素的裁剪区域，使得图片能够以圆角形式显示。
css实现内凹圆角样式
css实现内凹圆⾓样式实现这个效果主要是⽤了background-image 结合径向渐变radial-gradient。
⽰例：background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%);⽽对于径向渐变，主要是3个参数控制。
⼀个是原点和⼤⼩。
⼤⼩类似border-radius的感觉，原点使⽤at表⽰可以指定点的坐标，或使⽤left、right、top、bottom来表⽰。
其次是两个颜⾊和透明度、⼤⼩等。
这⾥50px或百分⽐，亲测第⼀个只有50才是半圆⾓，⽽第⼆个50%貌似影响不⼤。
下⾯是代码：<style>p{margin:0;padding:0;}.top-box{width:100%;height:200px;background: red;position: relative;margin-bottom:20px;border-radius: 4px 4px 0 0;}.bottom-box{width:100%;height:100px;background: #fff;position: relative;border-radius: 0 0 4px 4px;}.top-box p,.bottom-box p{width: calc(100% - 20px);height:10px;position:absolute;left: 10px;}.top-box p{background: red;bottom: -10px;}.bottom-box p{background: #fff;top: -10px;}.top-box p::before,.bottom-box p::before{content:'';position:absolute;width: 10px;height: 10px;left:-10px;}.top-box p::after,.bottom-box p::after{content:'';position:absolute;width: 10px;height: 10px;right:-10px;}.top-box p::before{background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%);}.top-box p::after{background-image: radial-gradient(circle 10px at 100% 100%, transparent 50px, red 50%);}.bottom-box p::before{background-image: radial-gradient(circle 10px at 0 0, transparent 50px, #fff 50%);}.bottom-box p::after{background-image: radial-gradient(circle 10px at 100% 0, transparent 50px, #fff 50%);}</style><div id="modal"><div class="mask"></div><div class="wrap"><div class="top-box"><p></p></div><div class="bottom-box"><p></p></div></div></div>最后补充⼀下径向渐变radial-gradient() 函数的知识点语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);。
无懈可击的CSS圆角技术
无懈可击的CSS圆角技术处理圆角需要对四张图片的合适安置—每个圆角用一张。
每个圆角都要独立出来，以便框能够在各个方向伸展。
于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体...是不是觉得有点难度呢？嘿嘿，下文会带您详细的说明～要一个宽度不固定的框，事情变得有些复杂了。
宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。
为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。
每个圆角都要独立出来，以便框能够在各个方向伸展。
于是，四张图片就意味着需要四个HTML 对象来作为背景图片的载体。
有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加上多张背景图。
这种方法的问题在于，在编写本书的时候，Internet Explore(IE)还不支持“生成内容”，因些相当大数量的用户就将无法看到圆角效果。
那怎么办呢？如果一个固定的宽度已经预先确定，那就能很容易地使用本章上一节中给出的那种方法，只背景图片：一张用于显示顶部的左右圆角，另一张显示底部的左右圆角。
准备好两个HTML对象来做图片载体并不是难题。
可是当要求实现宽度不固定的框时，为了让IE用户也能看到一样的设计效果，那就是加上额外的HTML代码了。
圆角化以下是Web标准的能人，也是本书的技术编辑Ethan Marcotte在解决Browse Happy网站所面临这样的问题时的做法（图1）图1Ethan 用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器，包括软件名称和图标（图2）。
图2 这个圆角矩形框可以往任何方向扩展Ethan 没有给框设定固定的宽度，而使用了一种对前面提到过的“滑动门”技术的变通方法，使得当内容文字增多（或增大）时，框在水平和竖直方向都能伸缩（图3）。
图3 当文字变大时，框会在水平和竖直方向扩展，同时能保持圆角形状不变我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。
用CSS 3新特性实现圆角效果
这种方法不用创建有颜色的图片作为圆角的背景，而
是 创 建 曲线 型 的 图 片 来 盖 住 内 容 框 的 背 景 颜 色 。 这张
图片有一半是透 明的 ，因此露 出背景颜色的地方就有
奄 盛扩 ｆ 《时 ｔ ｐ ｒｇ ｔ．ｉ ｏ ｉｈ ｇ ｆ 摧 越 荔ｔ ｌ ＋ ． ｉ ｏ ｅｔｇｆ
２ ０ １Ｏ Ｏ１ １ ２ ９
￣Ｔ ｃ ｎ ｌｇ 技 ｅ ｈ ｏｏ ｙ ｌ 术
ｑ ｔ ），
』 ｛ ０ｔｔ０ —ｒ ｇｎｔ ・ ｃ ｇ ＝ 』 Ｄａｃ ｋｇｒ０ｕ ａ —
有 应 用 ， 可 以 实 现 比 圆 角 复 杂 得 多 的 效果。
ｂ ｄ －ｍａ ｏｒ ｅｒｉ ｇｅ
致。
最后实现 的效果大致如图２ 所示。
掌 ＇Ｓｉ ｅ Ｒｏｕｎ Ｃｏｍｅｒ ｍｐｌ ｄ
Ｓ ｎ ｌ ｏｏ ｅ ａ ｋ ｒ ｕ ｄｗｉ ｉ ｅ ｉｇｅｃ ｌｒ ｄｂ ｃ ｇ ｏ ｎ ｌ ｘ ｄｗｉｔ ． ｅｔ ｈｆ ｄｈ Ｕｓ ｗｏ ｂ ｃ ｇｏ ｎ ｍａ ｅ ． ａ ｋ ｒ ｕ ｄｉ ｇ ｓ
内 容框 的颜 色 ， 只 需 要 在ＣＳ 代 码 中修 改．ｏ 的背 景 Ｓ ｂｘ
颜 色 值 ，不 必 创 建任 何 新 的 图 片 。需 要 注 意 的是 覆 盖
我 们 要 将 之 前 应 用 于 顶部 和底 部 的 图 片分 别分 割 成 两张 ，所 以这 项 技 术 需 要 四张 图 片 ，并 且 要 增 加 一 些 无意 义 的Ｈ ｐｐｅｒ一１ｎ
ｉ — ｅ １ ｒ ｐｅ ｔ ｌ ｆ ｔ ｐ ） ｏ ａ ｅ ｔ ｏ
．
多个背景 图像
仍 以前 面 的 Ｈ ＭＬ 码 为例 ： Ｔ 代
＜ｄｉｖ ｃｉａｓｓ一 ” ｂ ０× ” ＞
用css生成的无锯齿完美圆角
⽤css⽣成的⽆锯齿完美圆⾓现在web2.0时代圆⾓风⾏，对于圆⾓效果有多种实现⽅案，⽐如圆⾓透明的png图⽚、透明gif、纯css控制等等今天在⽹上看到⼀种⽤css实现⽆锯齿完美圆⾓的⽅法，值得收藏。
HTML代码：1: <html>2: <head>3: <style type="text/css">4: .spiffy{display:block}5: .spiffy *{6: display:block;7: height:1px;8: overflow:hidden;9: font-size:.01em;10: background:#CC0000}11: .spiffy1{12: margin-left:3px;13: margin-right:3px;14: padding-left:1px;15: padding-right:1px;16: border-left:1px solid #e99191;17: border-right:1px solid #e99191;18: background:#d83f3f}19: .spiffy2{20: margin-left:1px;21: margin-right:1px;22: padding-right:1px;23: padding-left:1px;24: border-left:1px solid #f9e5e5;25: border-right:1px solid #f9e5e5;26: background:#d53030}27: .spiffy3{28: margin-left:1px;29: margin-right:1px;30: border-left:1px solid #d53030;31: border-right:1px solid #d53030;}32: .spiffy4{33: border-left:1px solid #e99191;34: border-right:1px solid #e99191}35: .spiffy5{36: border-left:1px solid #d83f3f;37: border-right:1px solid #d83f3f}38: .spiffyfg{39: background:#CC0000}40: </style>41:42: </head>43: <body>44:45: <div>46: <b class="spiffy">47: <b class="spiffy1"><b></b></b>48: <b class="spiffy2"><b></b></b>49: <b class="spiffy3"></b>50: <b class="spiffy4"></b>51: <b class="spiffy5"></b></b>52:53: <div class="spiffyfg">54: <!– content goes here –>55:56: this is the content!<br/>57: this is the content!<br/>58: this is the content!<br/>59: this is the content!<br/>60: this is the content!<br/>61: this is the content!<br/>62: this is the content!<br/>63: </div>64:65: <b class="spiffy">66: <b class="spiffy5"></b>67: <b class="spiffy4"></b>68: <b class="spiffy3"></b>69: <b class="spiffy2"><b></b></b>70: <b class="spiffy1"><b></b></b></b>71: </div>72: </body>73: </html>效果⾮常好，没有锯齿状这⾥有个⼯具链接，可以在线⽣成以上代码，⾮常⽅便。
CSS3圆角边框和边界图片效果实例
CSS3圆⾓边框和边界图⽚效果实例本⽂的学习要点如下：•圆⾓ border-radius•盒阴影 box-shadow•边界图⽚ border-image1.圆⾓ border-radiusXML/HTML Code复制内容到剪贴板1. <div>border-radius 属性允许您为元素添加圆⾓边框！ </div>2.3. div {4. width: 200px;5. height: 100px;6. padding:20px;7. border: 1px solid red;8. border-radius : 25px;9. }2.盒阴影 box-shadowXML/HTML Code复制内容到剪贴板1. <div></div>2.3. div {4. width: 200px;5. height: 100px;6. background: red;7. /*x轴偏移量 y轴偏移量模糊程度阴影颜⾊*/8. box-shadow: 10px 10px 5px #000;9. }10.3.边界图⽚ border-imagehtml部分XML/HTML Code复制内容到剪贴板1. <p><b>注意: </b> Internet Explorer 不⽀持 border-image 属性。
</p>2. <p> border-image 属性⽤于设置图⽚的边框。
</p>3.4. <div id="round">这⾥，图像平铺（重复）来填充该区域。
</div>5. <br>6. <div id="stretch">这⾥，图像被拉伸以填充该区域。
</div>7.8. <p>这是我们使⽤的图⽚素材：</p>9. <img src="images/border.png" />10.css部分CSS Code复制内容到剪贴板1. div {2. width: 250px;3. padding: 10px 20px;4. border: 15px solid translate;5. }6. #round {7. /*safari*/8. /*图⽚源图⽚边界向内偏移量图⽚的宽度⽤于指定在边框外部绘制 border-image-area 的量样式*/9. -webkit-border-image : url(../images/border.png) 30 30 round;10. /*opera*/11. -o-border-image : url(../images/border.png) 30 30 round;12. border-image : url(../images/border.png) 30 30 round;13. }14.15. #stretch {16. -webkit-border-image : url(../images/border.png) 30 30 stretch;17. -o-border-image : url(../images/border.png) 30 30 stretch;18. border-image : url(../images/border.png) 30 30 stretch;19. }20.以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。
是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？答案是肯定的，下面看看它的终极功夫。
还是先看最终效果图吧！图一看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，我特意应用了一个背景图片，你可以下载本模型到你的电脑中，随意伸缩窗口的大小，看看外圆角是否是透明的。
有了这种效果，你再也不愁给每一张图片作圆角的工作，这种效果在一些图片类的演示页面中经常见到，特别适用那些图片比较多的列表中。
怎么样，效果还可以吧！好了，我们来看看它的实现机制吧！实现原理：这种效果其实就是我在第二章中变体实现，下面讲一讲主要的关键代码。
主要变化的还是背景图片的定位，只是这一次与第二章中的有些不同，这次需要考虑到下面的两个圆角的变化。
先看看上面两个圆角的实现：/*图片偏移定位--上面部分*/.sharp b.b2{background-position:-4px top;}.sharp b.b3{background-position:-2px -1px;}.sharp b.b4{background-position:-1px -2px;}复制代码再看看下面两个圆角的样式设置，下面部分和上面部分是相互对应的。
/*图片偏移定位--下面部分*/.sharp b.b7{background-position:-4px bottom;}.sharp b.b6{background-position:-2px bottom;}.sharp b.b5{background-position:-1px bottom;}复制代码不同的图片调用样式：/*颜色方案一,绿色风格----------------------------------------*//*边框色*/.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.colo r1 .content{border-color:#262626;}.color1 .b1,.color1 .b8{background:#262626;}/*图片路径*/.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color 1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat;}复制代码前面两句共同构成边线框的颜色值，需要设置成同一个色值，后面的一句设置图片的调用路径。
三句话就搞定一种颜色方案了。
缺点：对于这种用纯CSS来实现的圆角框，不得不说说它的缺陷。
1. 语义化不够好，因为其圆角全部由HTML结构标签堆砌而成，而这些标签在字面上讲没有任何的含义，全是为了样式的表现而存在的，所以造成HTML代码无端增多，不利于SEO优化。
这也是大家所诟病的地方，也是广大前端工程师不喜欢它的最大原因。
2. 样式的定义比较复杂，可操作性繁琐，如果没有弄懂原理，会觉得特麻烦。
3. 边线框宽度只适用于较小的值，无法定义线框的大小，因为一超过1px的宽度值，就会产生比较直观的锯齿。
4. 圆角不能调节大小，如果要模拟更圆滑的效果，就需要添加更多的容器，造成结构更加复杂。
5. 不太适合对图形要求比较高的场合，因为它不够圆滑，如果将它放大会看到一些锯齿。
优点：说了这么多缺点，也要来说说它的优点：1. 兼容性好，这种圆角框通用于全部的浏览器，不存在兼容性问题。
2. 弹性自适应宽度高度的大小变化，特别适用于流体布局的页面中使用。
3. 可自定义边框和背景色，随心所欲地改变风格。
4. 不需要制作圆角图片，节约网络流量，并且也可以减少或降低设计人员的工作量，减少前端人员布局定位的兼容性工作。
扩展性：如果将它的不足尽最大化地减弱，那么这将是一种不错的效果，我想这些工作就需要JS来参与了，而这样的话已超出本文标题的范围了。
并且这种JS的圆角框已经有了比较成熟的作品了。
序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。
而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。
纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。
在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。
而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。
总觉得CSS能完成的工作，为什么不让它来实现呢？实现原理：纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。
图一从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。
因此根据这个原理我们可以实现简单的html 结构和样式。
1、Html结构层：代码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样式：代码1.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidde n; 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; heigh t: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标签一起构成圆角框的外边框轮廓。
往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计制作不同的换肤方案呢，答案是有的。
在我的这个应用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事情。
下面看看我是如何将它们应用到不同的颜色的。
在上面的样式设计中，我已经给颜色方案留下了可以扩展的空间。
我将所有的涉及到边框色的类名全部集中在一起，用群选择符给它们设置一个边框的颜色就可以了。
如下所示：代码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容器，将它们的背景色全部设置一个颜色，这样除了线框外的所有地方都成为一种颜色了。