border-image用於給border（邊框）貼上背景圖像
類似於CSS中的background（背景）屬性。
例如：background:url(xx.jpg) 27px no-repeat;指的是圖片(url(xx.jpg))，位置(27px)，重復性(no-repeat)。
border-image與此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數值，也支持百分值），重復性。
例如：border-image:url(border.png) 27 repeat; 指的就是圖片(url(border.png))，剪裁位置(27)，重復方式(repeat)。
語法：border-image:source slice repeat;
source:所用圖像的url地址；
slice:1~4個長度值（或者百分比），用於設置圖片在每一條邊上的距離（區域）；
repeat：1~2個關鍵字，用於設置圖片在水平方向和豎直方向的重復方式。取值有以下四種：
stretch：默認值，將圖片進行拉伸以填充邊框的長
repeat：沿邊框長平鋪圖片
round：沿着邊框的長整數次的平鋪圖片（元素可能被自動調整大小以適應該要求）
space：沿着邊框的長整數次的平鋪圖片（如果圖片不能填滿元素，則使用空白填充）
下面我們將border-image的復合寫法分解描述，border-image的主要參數就是上面提到的三個：圖片，剪裁位置，重復性。
其實還有另外兩個，文章最后面再講。更好理解
一、圖片(border-image-source)
border-image的背景圖使用url()調用，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;
二、圖片剪裁位置(border-image-slice)
1、沒有單位，默認單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這里的27專指27px。
2、支持百分比值，百分比值大小是相對於邊框圖片的大小，假設邊框圖片大小為400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。
3、剪裁特性。類似於CSS中的clip屬性。其有1~4個參數，代表上右下左四個方位的剪裁，符合CSS普遍的方位規則（與margin，padding等或border-width一致），舉個簡單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%”的示意可以用下圖表示：
距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對圖片進行了“四刀切”，形成了九個分離的區域，這就是九宮格，這是下面深入講解border-image的基礎。
三、重復性(border-image-repeat)
取值為repeat（重復），round（平鋪）和stretch（拉伸）。其中，stretch是默認值。
參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復）。
關於round 和repeat 的區別。
round會湊整填充（進行了適度的拉伸）。repeat不進行拉伸，不湊整。 具體效果看文章后邊的例子。
四、實際渲染規則
通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎么對應地貼在div的邊框上呢？
=》 
- 如圖 在border-image中的橙紅色的四個邊角只會呆在border的四個角,並且水平和垂直方向均被拉伸來填充border的四個角。
- 如圖 上下區域即border-top-image和border-bottom-image受到第一個參數——水平方向效果影響：如果為repeat，則此區域被水平重復(round水平平鋪，stretch水平拉伸)來填充對應的上下border【該區域在垂直方向上首先會按所對應的border-image-width的值等比縮放，然后再按參數設置在邊框水平方向上進行重復或平鋪或拉伸】
- 左右區域border-left-image和border-right-image 的作用效果亦然【該區域在水平方向上首先會按所對應的border-image-width的值等比縮放，然后再按參數設置在邊框垂直方向上進行重復或平鋪或拉伸】
我們用下圖(27×3)px *(27×3)pxpng 做實驗，我給不同部位加了一個序號做標志，便於觀察。
// 加一個藍色背景的父級，便於我們分析效果。 .border_image { width: 400px; height: 115px; border: 3em double orange; -webkit-border-image: url(border.png) 27 round; border-image: url(border.png) 27 round; } .box { background: blue; } <div class="box"> <div class="border_image"></div> </div>
效果如下：
//去掉重復屬性，即默認都為stretch
border-image: url(border.png) 27;
效果如下：
//使用repeat
border-image: url(border.png) 27 repeat;
效果如下：
//邊框寬度改變
border-image: url(border.png) 27 repeat stretch;
border-width: 3rem 1rem;
效果如下：
五、(邊框背景寬度)border-image-width
這個屬性默認是邊框的寬度，用來限制相應區域背景圖的范圍，
首先相應背景區域的圖像會根據這個屬性值進行縮放。然后再重復或平鋪或拉伸。
在復合寫法中應該位於 slice屬性 和repeat屬性中間 用“/”間隔
如：border-image:url(border.png) 27 / 6rem / repeat;
語法：border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
length 帶 px, em, in … 單位的尺寸值
percentage 百分比
number 不帶單位的數字；它表示 border-width 的倍數
auto 使用 auto， border-image-width 將會使用 border-image-slice 的值
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem;
效果如下，（白框為border）
border-image-width: 1.5rem;
效果如下，（白框為border）
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem 1.5rem;
效果如下，（白框為border）
六、（邊框背景擴散）border-image-outset
語法：border-image-outset: [ <length> | <number> ]{1,4} 相當於把原來的貼圖位置向外延伸。不能為負值，試一下就知道。 在復合寫法中應該位於 border-image-width 后面，用“/”間隔 如：border-image:url(border.png) 27 / 6rem / 1.5rem /repeat; 向外延伸1.5rem再貼圖。。
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 1.5rem;
border-image-outset: 1.5rem;
效果如下，（白框為border）
摘自：
html5+css3 WEB前端開發
https://segmentfault.com/a/1190000010969367?utm_source=tag-newest