前置知识：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-clip 实现单元素方案：

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

实现原理

1. 通过 background 设置多重背景：

2. 底层为图片背景
   上层用 linear-gradient 创建纯色背景 通过 background-clip 分别控制背景显示范围，实现边框背景效果。

小结

设置背景边框 就是通过正常的background 设置背景， 通过 linear-gradient 和 background-clip 的能力来将内容区域的背景描述出来；

这样，两个背景叠加就可以实现边框背景的效果。