Page 79 - css揭秘

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

正如我们在图 2-59 中所看到的，这个结果跟我们想要的已经非常接近
了。但边框的图片有一种怪异的拼接效果。原因是 background-origin 的
默认值是 padding-box，因此，图片的显示尺寸不仅取决于 padding box 的
尺寸，而且被放置在了 padding box 的原点（左上角）。我们看到的实际上
就是背景图片以平铺的方式蔓延到 border box 区域的效果。为了修正这个问
题，只需把 background-origin 也设置为 border-box 就可以了：

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
图 2-58 background-origin: border-box;
关于 border-image 的快速入门。 这些新属性也是可以整合到 background 这个简写属性中的，这样可以
上图：待切分的图片，图中的虚
线表示切割线 显著地减少代码量：
中图：border-image: 33.34%
url(...) stretch; padding: 1em;
下图：border-image: 33.34% border: 1em solid transparent;
background:
url(...) round;（你可以在 linear-gradient(white, white) padding-box,
play.csssecrets.io/border-image url(stone-art.jpg) border-box 0 / cover;
体验相关代码）

试一试 play.csssecrets.io/continuous-image-borders

当然，这个技巧还可以用在渐变图案上。举个例子，下面这段代码可以
生成一种老式信封样式的边框：

padding: 1em;
border: 1em solid transparent;
图 2-59 background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
首次尝试就已经非常接近我们想 red 0, red 12.5%,
要的效果了 transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;

你可以在图 2-61 中看到结果。你可以很容易地通过 background-size
属性来改变条纹的宽度，通过 border 属性来改变整个边框的厚度。与之前
的石雕边框的例子不同，这个效果也可以通过 border-image 来实现：

48 第 2 章 背景与边框

඀ࠡ JOEC