border-image 邊框圖片

這個屬性的兼容性不是很好，所以在正常的前端開發工作中很難用到，但是在不考慮兼容性的情況下，它無疑的一個很強大的屬性，因為它可以自定義漂亮的邊框，而不在是單調的線條。

1. 官方解釋

CSS 屬性允許在元素的邊框上繪制圖像。這使得繪制復雜的外觀組件更加簡單，也不用在某些情況下使用九宮格了。使用 border-image 時，其將會替換掉 border-style 屬性所設置的邊框樣式。雖然規范要求使用 border-image 時邊框樣式必須存在，但一些瀏覽器可能沒有實現這一點。

2. 慕課解釋

通過 border-image 屬性可以給元素添加自定義得而邊框樣式，而不單單是系統提供的那幾種。換句話說就是我們可以自定義一個圖片來充當元素的邊框對它進行環繞。

3. 語法

border-image:source slice repeat;

包含屬性

4. 實例

1. 使用 border-image 為元素自定義一個圖片邊框。

.demo{
    width: 100px;
    height: 100px;
    background: #ccc;
    border-width: 50px;
    border-style: solid;
    border-image: url(./../img/border-image.jpg);
}

效果圖

使用 `border-image` 為元素自定義一個圖片邊框效果圖

我們這使用的是 bordr-image 這個屬性，并定義了圖片路徑 其它的不設定使用默認值。

2. 使用 border-image-source 為元素設定一個邊框。

.demo2{
    width: 100px;
    height: 100px;
    background: #ccc;
    border-width: 50px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
}

效果圖

使用 `border-image-source` 為元素設定一個邊框效果圖

我們可以看到 例1 和 例2 兩個圖是一樣的，因為我們僅僅使用了 border-image-source 增加了圖片路徑而已。

3. 我們在 demo2 上增加 border-image-slice 。

.demo2{
    width: 100px;
    height: 100px;
    background: #ccc;
    border-width: 50px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice: 70;
}

效果圖

增加 `border-image-slice`效果圖

通過給 slice 設定一個 70 我們得到了一個漂亮的邊框，下面重點說下這個屬性值是如何作用在邊框圖片上的。
4. 繼續在 demo2的基礎上增加 border-image-outset 。

.demo2{  
    width: 100px;
    height: 100px;
    background: #ccc;
    border-width: 20px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice:20;
    border-image-outset:22px;
}

效果圖

增加 `border-image-outset`效果圖

從效果圖中的紅色箭頭我們可以看到，邊框圖片和灰色元素之間有一條 2px 的白線，這是因為我設置了 image-outset 向外偏移 了 22px 的原因。

5. 使用 border-image-repeat 來為 demo2 設定圖片的填充形式

.demo2{              
    width: 100px;
    height: 100px;
    background: #ccc;
    border-width: 20px;
    border-style: solid;
    border-image-source: url(./../img/border-image.jpg);
    border-image-slice:20;
    border-image-outset:22px;
    border-image-repeat: repeat;
}

效果圖

使用 `border-image-repeat` 來為 demo2 設定圖片的填充形式效果圖 通過效果圖我們可以看到圖片是以平鋪重復的方式來填充的，而這個屬性默認是 stretch 拉伸來填充圖片的。這個屬性還有以下值

5. 兼容性

6. 經驗分享

1. 這個屬性使用并不太難，不過其中的border-image-slice屬性在使用的時候有一個小技巧，就是當想要其中 image 不失真即不拉伸，slice 要和 width 一樣。
   例如：

.demo{
    border-width:20px;
    border-image-slice:20;
}

還有一點要注意的是 slice 不需要掛單位。
2. 如果想填充中心可以加上-webkit-border-image就像下面這樣

.demo{
    -webkit-border-image: url(./../img/border-image.jpg) 20 20  stretch;
}

這是 border-imgae 的連寫方式，第一個和第二個 20 都是 slice，認出它的最后方法就是 它們都不帶單位。

7. 小結

1. border-image 使用時候一定要設定 border-style 雖然這個屬性沒什么用，但是如果不設定它 border-image 就不生效。
2. border-image-slice 如果設定數值當 px 用時候直接寫數字就可以 如果加上 px 反而會不生效。
3. border-width 用來設定邊框的寬度，它決定圖片邊框展示的厚度(即圍繞寬度)。