Page 78 - css揭秘

它的原理基本上就是九宫格伸缩法：把图片切割成九块，然后把它们应用到
元素边框相应的边和角。关于它的工作原理，图 2-58 提供了图形化的解说。
如何用 border-image 切割图片并生成图 2-57 中的效果？就算我们针
对特定的元素宽高和边框厚度找到了切割位置，这个结果也无法适配尺寸稍
有差异的其他元素。问题在于，我们并不想让图片的某个特定部分固定在拐
角处；而是希望出现在拐角处的图片区域是随着元素宽高和边框厚度的变化
而变化的。只要你稍微尝试一下，就会立即得出结论：这用 border-image
是不可能做到的。接下来我们该怎么办？
最简单的办法是使用两个 HTML 元素：一个元素用来把我们的石雕图
片设为背景，另一个元素用来存放内容，并设置纯白背景，然后覆盖在前者
之上：

<div class="something-meaningful"><div> HTML
I have a nice stone art border, 图 2-57
don't I look pretty?
</div></div> 这个图片边框在高度变化时的情况

.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}

.something-meaningful > div {
background: white;
padding: 1em;
}

这个方法确实可以生成如图 2-57 所示的“边框”效果，但需要一个额
外的 HTML 元素。这显然不够理想：它不仅把结构和表现混合起来，而且
在某些特定场景下，修改 HTML 是根本做不到的。问题来了：如果只用一
个元素，我们能做到这个效果吗？

解决方案

感谢背景与边框（第三版）（http://w3.org/TR/css3-background）引入了
对 CSS 渐变和背景的扩展，使得我们只用一个元素就能达成完全一样的效
果。主要的思路就是在石雕背景图片之上，再叠加一层纯白的实色背景。为
了让下层的图片背景透过边框区域显示出来，我们需要给两层背景指定不同
的 background-clip 值。最后一个要点在于，我们只能在多重背景的最底
层设置背景色，因此需要用一道从白色过渡到白色的 CSS 渐变来模拟出纯
白实色背景的效果。
把这个思路转换成代码之后，可能是：

8 连续的图像边框 47

඀ࠡ JOEC