这个技术的关键在于如何让存放文字的div#center的伸缩引起外部整个div#content的的伸缩，且保持#left,#center和#right的布局不被破坏(要无缝才能让人感觉一体，感觉真是)……当然这不属于我们今天的讨论范围，有兴趣的朋友可以参考我之前的一篇《深入理解css盒子模型》。这样就完成了自动伸缩功能。精简的代码如下：
<div class=”content” style=”height:32px;”> /*这个是伸缩的*/
<div class=”left” style”width:15px; height:32px;”></div>
<div class=”center” style=”height:32px;”>这里存放文字内容</div>/*这个也是可以伸缩的*/
<div class=”right” style=”width:15px; height:32px;”></div>
</div>
但至于如何才能使最外层的容器内收缩紧贴内部div，使div#center自动伸缩，就不在本课的范围之内，大家可以百度，也可以参照我上一篇文字《深入理解box盒子模型》。
例子2.我们先看一个jQuery插件fancybox的阴影效果：
这是模仿MacOS的效果的一个插件，由于整张图片太大，我只是截取了一个角下来。大家需要注意的重点是白色边框的外边缘的阴影效果（可能不是很明显）——参照上面的例子，您觉得阴影效果是如何实现的？
对，还是用九个盒子拼成的(可能这里有朋友会想到滑动门技术，的确这也是实现阴影的方法之一，但为了承上，这里暂且不介绍)，一个盒子装的是中间的照片，另外八个盒子分别装东，西，南，北，东南，西南，东北，西八个方向的阴影。这个不用画图，大家应该可以想象出来吧。但这个例子又有不同——这一次有九个盒子，要是按上一个例子一样，在一容中放九个盒子，再通过浮动，定位属性等来实现他们无缝拼接，也会是相当繁琐的一事。因为要考虑每一个盒子周围的盒子在自己伸缩时也能适当的做一些调整，不至于出现错位和缝隙。所以的这次的做法是将放阴影的八个盒子用绝对定位固定在中间的盒子的八个方向上，这样以中心盒子为中心，无论它怎么放大还是缩小，周围八个盒子都死死的附属着它，就再也不用考虑自己周围的盒子有错位之类的问题。图例如下：
再看看实际的定位是不是这样定位的呢，看看从firebug下的截图：
再看看其中一个fancybox-bg-n的具体css:
三，background-clip,background-origin入门
