深入浅出CSS3 background-clip,background-origin和border-image教程

一．这篇博客的初衷

　 最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。于是尝试在百度中搜素，结果资料也是少的可怜，反复转载的只有一篇来自怿飞博客的《 background-clip与background-origin 的一则运用》

,但毕竟是几年前的文章，其中的部分内容已经不适用于现在的标准了，其他的搜索结果也不是很理想于是乎只好自己动手丰衣足食。花了一至了两天把这个内容消化。同时把要点和精总结在这篇博客中，给自己和大家做一个参考。

在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的伸缩引起外部整个div#content的的伸缩，且保持#left,#center和#right的布局不被破坏(要无缝才能让人感觉一体，感觉真是)……当然这不属于我们今天的讨论范围，有兴趣的朋友可以参考我之前的一篇《深入理解css盒子模型》。这样就完成了自动伸缩功能。精简的代码如下：