前置知识：CSS 渐变，5. 条纹背景，border-image，基本的 CSS 动画
前言
本篇目标是，实现一个图片边框，即某些情况下，我们希望一张图片展示在边框上，而非背景。
一、传统实现方案
正常我们面对这样一个需求时，下意识会想到的就是，用图片做背景，再在上方覆盖内容区域，背景色为纯色。这样用两个元素就可以实现我们预期的效果。
<div class="something-meaningful">
<div>
I have a nice stone art border,
don't I look pretty?
</div>
</div>
.something-meaningful {
background: url(https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}
这样就实现我们本篇的目标了，实现起来是相当简单了! 但有没有更合适的办法呢？比如尝试只用一个元素就实现这样的效果。
二、border-image
除了我们上述的方法，可能也有同学会想到 border-image 来实现图片边框，不妨直接试下。
/**
* Basic border-image demo
*/
div {
border: 40px solid transparent;
border-image: 33.34% url('https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG');
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
}
通过图片我们可以发现，除了4个边角，每条边的填充都被拉伸了。
所以我们可以再考虑下 border-image 它的实现原理是什么样的
每个菱形的宽和高皆为 81 ÷ 3 = 27，所以我们将
border-image-slice设置为27，这样图像的角区域和边缘区域宽高皆为 27px。为了使每个菱形的中心恰好位于元素背景的边缘，我们将令border-image-outset等于border-image-width的一半。最后，将border-image-repeat设置为round使分割出的不同区域均匀贴合，没有裁剪或间隙。
div {
border: 27px solid transparent;
border-image: 33.34% url('https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image/border.png');
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
border-image-repeat: round;
}
所以 border-image 是将图片进行九宫格分割，然后填充在边框内。和我们本次的需求可以说没有太大的关系。
三、linear-gradient
如果看过之前的章节，那么肯定知道，通过background 可以设置多个背景。那么我们只需要一个元素能满足多个背景的诉求：设置两个背景，底层为背景图案，上层为白色的背景，使得下层背景可以在边框处露出来即可。
通过我们的描述，要用到属性大概为：background 设置多背景、background-clip 控制背景范围、linear-gradient 描述白色背景、透明边框色。
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
小结
设置背景边框 就是通过正常的background 设置背景， 通过 linear-gradient 和 background-clip 的能力来将内容区域的背景描述出来；这样，两个背景叠加就可以实现边框背景的效果。
