border-image-slice
border-image-slice 就像忍者一樣，對！沒錯！我太愛拿忍者舉例哈哈哈，它會在圖片上切四刀，形成一個九宮格，保留頭顱和四肢後，再來決定中間的部分要怎麼處理，現在就帶你去了解一下。
（ 圖片來源 ）
border-image-slice 屬性規定圖像邊框的向內偏移。指定 4 個值（ 4 條分割線： top ， right ， bottom ， left ）將 border-image-source 分割成 9 宮格。
所以border-image-slice : 30% 35% 40% 30%;
即是距離圖片上部 30% 的地方，距離右邊 35% ，距離底部 40% ，左邊 30% 的地方各剪裁一下。也就是對圖片進行了四刀切，形成九宮格。
| 屬性 | 說明 |
|---|---|
| number | 數字值，代表圖像中像素（ 如果是光柵圖像 ）或矢量坐標（ 如果是矢量圖像 ）。 |
| % | 相對於圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。 |
| fill | 保留邊框圖像的中間部分。 |
number 不帶單位， 1 代表 1 個圖片像素。
錯誤寫法
border-image-slice: 30px 30px 30px 30px;
要把單位全部都拿掉如下
border-image-slice: 30 30 30 30;
如果在 border-image-slice 中給出 fill 關鍵字，則中間圖像背景會被保留。
border-image: url(img.png) 27 27 27 27 fill;
如果有 border-image-width / border-image-outset 屬性值， border-image-slice 必須指定數值，否則不合語法，如：
border-image: url(box.png) 27 27 27 27 / 10px / 10px;
下方為 錯誤寫法
border-image: url(box.png) / 10px / 10px;
如果對背景圖上下左右進行 100% 的切割，即 div 四個角為整張背景圖，由於切割超過 50% ，兩個角之間的背景圖沒有重合部分，所以 border-image 無法進行拉伸。
div{
width: 300px;
height: 300px;
border-width: 50px;
border-image: url(img.png) 100% round;
background: #ccc;
}
