使用場景
當我們需要在盒子邊框上做些文章時，但是在不同大小的盒子上想要讓邊框的樣式相同，那麼使用傳統的css代碼寫起來非常麻煩，如下例場景
那麼此時可以使用css3中引入的新特性，border-image(邊框圖檔)
如下圖：
邊框圖檔的切片原理
把四個角切出去(九宮格的由來)，中間部分可以鋪排、拉伸或者環繞.
類似與九宮格，采用上右下左的順序進行切片,但是需要保證四個角的完整度
border-image的常用屬性
一般常用的屬性有四個 如下圖:
舉例，寫一個demo盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo {
width: 300px;
height: 300px;
background-color: skyblue;
border: 15px solid gold;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
border-image-source 圖檔位置
添加border-image-source屬性後，在邊框裡添加一個圖檔,可以看到盒子四個角都變成我們添加的圖檔了
border-image-slice 圖檔切片
将剛才盒子中的邊框圖檔裡進行切片。注意是按照上右下左的順序來切的，并且不用跟機關
這裡我們都30，在我們寫的樣式中加入這樣一句代碼,之後盒子變成了這樣
border-image-width 設定圖檔寬度
為了更好的測試，這裡我在盒子裡寫了一段文字
假設我把邊框圖檔的寬度設定為30px
那麼盒子變成了這樣
由此可以得出：圖檔寬度不會擠壓文字，文字會在邊框上顯示 這個是圖檔邊框的寬度
border-image-repeat : 邊框是否平鋪
這個屬性常用的有三個值：分别為: 圖像是否應平鋪repeat()/stretch(拉伸，預設值)/round(鋪滿)
這裡由于篇幅原因就不一一測試了，感興趣的小夥伴可以自己試驗一下。
小結
border-image:圖檔邊框常用屬性
1. border-image-source: url(位址);
2.border-image-slice: 按照順序 上右下左進行圖檔切片，不加機關
3.border-image-width: 圖檔邊框的寬度(需要加機關)
4.border-image-repeat: 圖像是否應平鋪repeat()/stretch(拉伸，預設值)/round(鋪滿)