《
纯CSS圆角框：透明圆角化背景图片》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345542013.htm
当然对一些比拟有教训的职员来说，可以采取九宫格布局方法或者滑动门方式来做到自适应宽度的变更，九宫格个别都需要用到八张图片，而滑动门固然只用一张图片，但为了适应宽度的变化，这张图片普通都做得很大。
Tag： 背景图片 圆角 透明 圆角框 纯CSS 背景图片 圆角 透明 圆角框 纯CSS
将上面的多少句代码进行合并，如下所示：
犹如咱们在第一章中模型所见，坚持构造不变。
背景图片定位原理：
本模型在以下浏览器中完善通过：
b1标签位于第一位，它重要用来刻画上边框线，所以它不需要加载背景图片。
是的,纯CSS圆角框：基本的圆角框，看到这个后果图你会高深莫测，可是要想到这个办法，我却挥霍了不少脑细胞。呵呵！
你只需要复制上面的代码，简单修正一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想运用样式的容器上定义这个
仍是先看看终极的效果图，让大家有一个大略的印象。
空话少说，言归正传。
HTML结构层：
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.b3{background-position:left -1px;}
在上一讲根本的圆角框中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比方不能将图片应用到圆角框内。而在本例中，我会在上面的基本上作出一些翻新。就是将背景图片也圆角化，似乎目前在网络上还没有这样的功效应用，我只见过用js方式来实现的。但是纯CSS方式的实现可是我独家所创，如有相同，只能说好汉所见略同。呵呵！
CSS款式层：（只写要害代码）
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1*色彩方案一,绿色风格----------------------------------------*/
2
3/*边框色*/
4.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 ,
纯CSS圆角框：圆角化图片;.b7,.color1 .content{border-color:#A0C044;}
5.color1 .b1,
纯CSS圆角框3－圆角化图片,.color1 .b8{background:#A0C044;}
6.color1 h3{border-bottom:1px #679800 solid;}
7
8/*图片路径*/
9.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) ,
纯CSS圆角框2－透明圆角化背景图片;repeat-x;}
10
11/*文字内容背风景*/
12.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}
像这种小面积布局在网页设计中利用得很广泛，但目前网络风行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，而后应用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的弊病：不能主动适应宽度的变化，正常做法都是采用固定宽度的方式，这是因为图片的宽度决议的。
图二
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->h3{background-position:left -4px;}
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.b2{background-position:left top;}
color1类名即可。
--> [
网站建设之]纯CSS圆角框：透明圆角化背景图片
为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随便伸缩宽度，看看它是否适应弹性的变化。
b4位于第四位，所以它向上负偏移b2+b3高度值的和，为2px。
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->1 .sharp b.b2{background-position:left top;}
2 .sharp b.b3{background-position:left -1px;}
3 .sharp b.b4{background-position:left -2px;}
4 .sharp .content h3{background-position:left -4px;}
基础原理：
这样，b2、b3、b4、h3的图片叠加起来和原始图片高低渐变的效果完全重合，犹如一张图片，这样就达到模仿圆角图片的效果。
一种风格的定制也是一件简单的事情：
b2标签位于第二位，它是第一个需要加载背景图片的，然而不需要图片负偏移，所以直接居左居顶定位就可以了。b3标签位于第三位，它需要加载背景图片，让它的背景图片向上负偏移b2的高度值就可以，也就是1px。
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
图一
H3标签位于第五位,纯CSS圆角框1－基本的圆角框，所以它的背景图片需要向上负偏移b2+b3+b4高度值的各，也就是4px；
而我当初独创的这种方式能够完整做到适应不同的宽度须要，并且全体兼容所有的阅读器，而所需要的仅仅是一张很小的程度平辅的背景图片罢了。
你可以实现不同的颜色方案，就看你的设计师给你多少张不同图片了。
怎么样，原理够简略明了吧！
但是需要留神的是：每个b标签加载图片的定位是不一样的。
在我的演示模型中，我定义了9种作风的变化，看看有不合适你需要，直接复制就可以使用了，祝你用得开心！
实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并联合背景定位background-position方式来到达效果。我们知道，同一张图片加载多少次对于机能的影响并不大，由于这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。
我们都晓得图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？实在情理阐明了也就是一件很简单的事件，你看过下面的放大示用意后可能就会“哦”地一声，本来不外如斯……
原理明白后，要实现起来也就是一件瓜熟蒂落的事！
跟第一章中同样的道理，我们确定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤计划，当一个页面要屡次调用统一个圆角框时，也可以让它们有些丰盛的变化。实现不同的风格。OK，没问题，你只要要简单的将下面的样式中的背景图片的门路转变一下就可以了。
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->.b4{background-position:left -2px;}
(责任编辑：网站建设)
纯CSS圆角框：透明圆角化背景图片相关文章