border-image 邊框圖片

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

1. 官方解釋

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

2. 慕課解釋

通過 border-image 屬性可以給元素添加自定義得而邊框樣式，而不單單是系統(tǒng)提供的那幾種。換句話說就是我們可以自定義一個圖片來充當元素的邊框?qū)λM行環(huán)繞。

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 這個屬性，并定義了圖片路徑 其它的不設(shè)定使用默認值。

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

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

效果圖

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

我們可以看到 例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 設(shè)定一個 70 我們得到了一個漂亮的邊框，下面重點說下這個屬性值是如何作用在邊框圖片上的。
4. 繼續(xù)在 demo2的基礎(chǔ)上增加 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 的白線，這是因為我設(shè)置了 image-outset 向外偏移 了 22px 的原因。

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

.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 設(shè)定圖片的填充形式效果圖 通過效果圖我們可以看到圖片是以平鋪重復(fù)的方式來填充的，而這個屬性默認是 stretch 拉伸來填充圖片的。這個屬性還有以下值

5. 兼容性

6. 經(jīng)驗分享

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. 小結(jié)

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