前置知識：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 的能力來將內容區域的背景描述出來；

這樣，兩個背景疊加就可以實現邊框背景的效果。