深入浅出CSS3：background-clip,background-origin和border-image教程
一．这篇文章的初衷
最近在准备一个下学期参加比赛的概念网站，希望能用到& lt;/span>CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。于是尝试在百度中搜素，结果资料也是少的可怜，反复转载的只有一篇来自怿飞博客的《 background-clip与background-origin 的一则运用》
,但毕竟是几年前的文章，其中的部分内容已经不适用于现在的标准了，其他的搜索结果也不是很理想于是乎只好自己动手丰衣足食。花了一至了两天把这个内容消化。同时把要点和精总结在这篇博客中，给自己和大家做一个参考。
二．从传统的多图像背景技术谈起& lt;/strong>
在CSS3之前，2.0也好，2.1也罢。要想给一个块级元素添加圆角或是阴影,又或是一个比较复杂的背景图像(比如多边形，多纹路)都是相当困难的一件事。在这里先列举两个例子，有关如何组织复杂的背景和阴影效果。一方面是为了照顾一些入门web的朋友，另一方面也为了和后面这两个技术的应用做一个对比，做一个承上启下的作用。熟练的朋友可以跳过这一节，直接从下一节开始阅读
1.请大家先看这样一个效果：
注意文字的背景，大家有没有主意如何实现？一个最普通不过的想法是，我就按我需要的文字的长度，用photoshop做一个包含左右半圆形状的完整一体图片。但问题是，如果我文字的长度需要更改，变得更长或者更短时应该怎么办？为了不影响美观，我们又不得不把图片放回photoshop中返工？虽然不排除这是一种办法。但要是有非常多的页面和框背景需要用到这个图片，那工作量会是非常巨大的。很明显这是得不偿失的。于是我们会想，手动的让图片适应文字麻烦，要是能让图片自动能适应文字，是绝对的事半功倍。那究竟有没有这样一种方法呢？
答案是肯定的(在这里我们简略的谈一下关键思路，具体代码的实现就不深究了)，为了实现这个效果，通常我们只需要三幅图：
和
和
。具体原理如图所示：
相信看到图之后有朋友应该有不少已经心领神会了：我们在原来唯一一个用来存放文字的div中，又插入了三个 div:div#left,div#center,div#right。其中#left和#right分别用来存放半圆形的左右边缘且固定宽度，而中间的#center用来存放文字，背景采用repeat-x定位，且不定位宽度，再通过其它css设置让它能收缩紧贴内容区域（content），这样就能随着文字的长短而自如伸缩了。最后通过position或display属性让#lef，#center，#right实现无缝隙的拼接，同时让最外层的 div#content也收缩紧贴它包裹的三个div，然后——大功告成。
这个技术的关键在于如何让存放文字的div#center的伸缩引起外部整个< /span>div#content的的伸缩，且保持#left,#center和#right的布局不被破坏(要无缝才能让人感觉一体，感觉真是)……当然这不属于我们今天的讨论范围，有兴趣的朋友可以参考我之前的一篇《深入理解css盒子模型》。这样就完成了自动伸缩功能。精简的代码如下：
但至于如何才能使最外层的容器内收缩紧贴内部< /span>div，使div#center自动伸缩，就不在本课的范围之内，大家可以百度，也可以参照我上一篇文字《深入理解box盒子模型》。 例子2.我们先看一个jQuery插件fancybox的阴影效果： 这是模仿MacOS的效果的一个插件，由于整张图片太大，我只是截取了一个角下来。大家需要注意的重点是白色边框的外边缘的阴影效果（可能不是很明显）——参照上面的例子，您觉得阴影效果是如何实现的？ 对，还是用九个盒子拼成的(可能这里有朋友会想到滑动门技术，的确这也是实现阴影的方法之一，但为了承上，这里暂且不介绍& lt;/span>)，一个盒子装的是中间的照片，另外八个盒子分别装东，西，南，北，东南，西南，东北，西八个方向的阴影。这个不用画图，大家应该可以想象出来吧。但这个例子又有不同——这一次有九个盒子，要是按上一个例子一样，在一容中放九个盒子，再通过浮动，定位属性等来实现他们无缝拼接，也会是相当繁琐的一事。因为要考虑每一个盒子周围的盒子在自己伸缩时也能适当的做一些调整，不至于出现错位和缝隙。所以的这次的做法是将放阴影的八个盒子用绝对定位固定在中间的盒子的八个方向上，这样以中心盒子为中心，无论它怎么放大还是缩小，周围八个盒子都死死的附属着它，就再也不用考虑自己周围的盒子有错位之类的问题。图例如下： 再看看实际的定位是不是这样定位的呢，看看从< /span>firebug下的截图： 再看看其中一个fancybox-bg-n的具体css: 三，& lt;strong>background-clip,background-origin入门& lt;/p> 我想说的是，上面的两个例子总结起来只有两个字：麻烦。背景明明只关一个div的事，结果硬是要n多个不相关的div来辅助完成效果——background-clip,backgrou nd-origin便是我们的救星。要知道CSS3的任何新属性不是W3C人吃饱了撑的没事找事想出来来的，它的出现必然性必定是经过详细验证的且有它必要的价值。相信当您阅读完这一节的内容后，你就会开始学会如何用新技术摆脱那些陈旧繁琐的步有三个属性来就不复杂的效果了。 在开始之前，先做几点说明，请看： 首先我们要引入几个概念(呃，这是我自己翻译的，不知道对不对，可能孤陋寡闻了，请朋友们见谅):内容边缘(content edge),内边距边缘(padding edge),边框边缘(border edge),外边距边缘(margin edge)。为了理解，我们可以把内边距，边框，外边距看成一个环形的容器，并且每个环形容器都只有两条边，一条冲内，一条冲外(内和外也是相对的，好比外边距的外边就是边框的内边)，于是我们把冲外(outer)的那条边称为这个环形的边缘(edge)。当然因为内容区域是“实心”的，所以不存在内外的问题。 origin的翻译过来时原始的意思。顾名思义，所以background-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box(background-origin如果写在css中只有Opera浏览器可以识别，如果希望在火狐或者chrome或 Safari中使用，要使用它们浏览器的私有属性-moz-background- origin(Firefox),-webkit-background- origin(chrome,safari)，并且对应的值是 content,padding,border,省略了-box)，即你可以选择背景图片是从内容区域开始显示，还是内边距，还是边框。 举个例子，我们有一个div，关键在定位它的背景图片，为了让演示的效果更明显，我们让它从左上角开始定位，& lt;span style="font-size:10.5pt;font-family:宋体;">position:left top并且no-repeat。
在没有加入background-origin之前的代码为：
.border { background:url("images/qwqw_s.jpg"); background-repeat:no-repeat; background-position:left top; border-width:30px; border-style:dashed; border-color:red; width:180px; height:254px; padding:30px; margin:0 auto; }
评论