border-image 邊框圖片

這個(gè)屬性的兼容性不是很好，所以在正常的前端開(kāi)發(fā)工作中很難用到，但是在不考慮兼容性的情況下，它無(wú)疑的一個(gè)很強(qiáng)大的屬性，因?yàn)樗梢宰远x漂亮的邊框，而不在是單調(diào)的線條。

1. 官方解釋

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

2. 慕課解釋

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

3. 語(yǔ)法

border-image:source slice repeat;

包含屬性

4. 實(shí)例

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

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

效果圖

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

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

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

.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è)定一個(gè)邊框效果圖

我們可以看到 例1 和 例2 兩個(gè)圖是一樣的，因?yàn)槲覀儍H僅使用了 border-image-source 增加了圖片路徑而已。

3. 我們?cè)?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`效果圖

通過(guò)給 slice 設(shè)定一個(gè) 70 我們得到了一個(gè)漂亮的邊框，下面重點(diǎn)說(shuō)下這個(gè)屬性值是如何作用在邊框圖片上的。
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 的白線，這是因?yàn)槲以O(shè)置了 image-outset 向外偏移 了 22px 的原因。

5. 使用 border-image-repeat 來(lái)為 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` 來(lái)為 demo2 設(shè)定圖片的填充形式效果圖 通過(guò)效果圖我們可以看到圖片是以平鋪重復(fù)的方式來(lái)填充的，而這個(gè)屬性默認(rèn)是 stretch 拉伸來(lái)填充圖片的。這個(gè)屬性還有以下值

5. 兼容性

6. 經(jīng)驗(yàn)分享

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

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

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

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

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

7. 小結(jié)

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