CSS 屬性篇(十一)：border-image屬性

border-image 經過指定一張圖片來取替 border-style 定義的樣式，但 border-image 生效的前提是： border-style 和 border-width 同時爲有效值(即 border-style 不爲 none，border-width 不爲 0)。

一、圖片資源(border-image-source)

border-image: none | <image>
複製代碼

border-image的背景圖使用url()調用，圖片能夠是相對路徑或是絕對路徑，也能夠不使用圖片，即border-image:none;
none 表示border-image不作任何效果，邊框使用 border-style 指定的樣式。

二、圖片剪裁位置(border-image-slice)

bordre-image-slice [<number> | <percentage>]{1,4} && fill?
複製代碼

border-image-slice 從名字上看就很好理解：邊框圖像切片。指定4個值(4條分割線：top, right, bottom, left)將 border-image-source 分割成9宮格，以下：

border-image-slice 四條線的值類型爲：number | percentage

• 沒有單位，默認單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這裏的27專指27px。
• 支持百分比值，百分比值大小是相對於邊框圖片的大小，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

舉個簡單的例子，前面提到，支持百分比寬度，因此這裏「30% 35% 40% 30%」的示意能夠用下圖表示：

距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對圖片進行了「四刀切」，造成了九個分離的區域，這就是九宮格。

關鍵字：fill
做用是將border-image-source九宮格中間那一塊切片做爲DOM節點的背景。
素材圖片box.png:

.box {
    width: 27px;
    height:27px;
    border: 27px solid;
    border-image: url(box.png) 27 27 27 27 fill repeat stretch;
}
複製代碼

三、邊框背景寬度(border-image-width)

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
複製代碼

border-image-width 字面意思是邊框圖片寬度，做用是將 DOM 節點分割成九宮格。
假設 border-image-slice 分割 border-image-source 的九宮格爲A， border-image-width 分割 DOM 的九宮格爲 B，A 與 B 的每一個格子存在一一對應關係，具體以下：

border-image-width 參數的四種類型:

• length 帶 px, em, in … 單位的尺寸值
• percentage 百分比
• number 不帶單位的數字；它表示 border-width 的倍數
• auto 使用 auto， border-image-width 將會使用 border-image-slice 的值

注：

• border-image-width 的參數不能爲負值
• border-image-width的缺省值是number類型：1

四、重複性(border-image-repeat)

border-image-repeat: [ stretch | repeat | round | space ]{1,2}
複製代碼

border-image-repeat 字面意義是 邊框圖片平鋪。做用是指定 border-image 的平鋪方式。語法上最多可接收兩個參數，第一個參數指定水平方向邊框的平鋪方式，第二個參數指定垂直方向邊框的平鋪方式，九宮格的中間區域受這兩參數的共同影響，以下：

目前只能四值可供選擇：stretch(拉伸), repeat(重複), round(平鋪), space。 其中，stretch 是默認值，space 目前chrome瀏覽器按 repeat 來渲染。這四個參數的效果以下：

注：

• round 與 repeat 的區別：round會湊整填充（進行了適度的拉伸）。repeat不進行拉伸，不湊整。
• round 與 space 的區別：雖然都是湊整填充顯示，可是 space 是在小方塊之間有必定的空隙。

五、邊框背景擴散(border-image-outset)

border-image-outset: [ <length> | <number> ]{1,4}
複製代碼

border-image-outset做用是把原來的貼圖位置向外延伸

.box {
	margin: 0 auto;
	width: 81px;
	height: 81px;
	border: 27px solid rgba(0,0,0,.1);
	border-image-source: url(//misc.aotu.io/leeenx/border-image/box.png);
	border-image-slice: 27 27 27 27;
	border-image-repeat: repeat;
}
.outset {
	border-image-outset: 27px;
}
複製代碼

border-image-outset 與 border-image-width 參數的意義是同樣的。
注：

• border-image-outset 的值不能爲負值

六、border image area

用於繪畫 border image 的區域叫 border image area，它默認與邊框盒子(border box)徹底重合。簡單地說，border image area 就是 border-image-width 分割出來的九宮格。

6.1 border-box 與 border image area 的關係

上面有提到，border image area 默認與 border-box 是重合關係。
若是把標準後退到發展階段，在發展階段，DOM節點由 border-width 分割爲九宮格，這個時期的 border-box 就是 border image area。
到了成熟階段（即本章介紹的版本），border-box 與 border image area 是默認重合的兩個空間，border-box 只負責盒子模型上的事務，border image area 則專一於邊框圖像空間分割。

6.2 border-width 能夠分割 border image area嗎？

在實際使用過程當中，發現 border-width 也能夠分割 border image area。以下：

.box {
	margin: 0 auto;
	width: 27px;
	height: 27px;
	border: 27px solid rgba(242,181,78,.3);
	border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
	border-image-slice: 27 27 27 27 fill;
	border-image-repeat: stretch stretch;
}
複製代碼

若是單從上述測試結果而言，border-width 能夠分割 border image area 是正確。不過，這個結論有一個前提：border-image-width 與 border-image-outset 同時缺省。 若是將CSS代碼修改成：

.box {
	margin: 0 auto;
	width: 27px;
	height: 27px;
	border: 27px solid rgba(242,181,78,.3);
	border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png);
	border-image-slice: 27 27 27 27 fill;
	border-image-outset: 10px;
	border-image-repeat: stretch stretch;
}
複製代碼

設置了 border-image-outset 後 border-width 的分割 border image area 的假像就被揭穿了！！ border-width 分割 border image area 的假象源自 border-image-width 的缺省值1，數值1表示 border-image-width 是 1x border-width，大白話就是border-image-width 的默認值是border-width。

七、簡寫：border-image

border-image: 
    <‘border-image-source’> || 
    <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || 
    <‘border-image-repeat’>
複製代碼

因爲 border-image-slice、border-image-width 與 border-image-outset 這三者的參數類似，因此有必要說一下，這三個參數在簡寫裏有兩個注意點:

• border-image-outset 參數必定要在 border-image-width 以後，假設border-image-width缺省，仍然須要在原來 border-image-width 寫上 /，以下：

border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
複製代碼

• 若是有 border-image-width/ border-image-outset 屬性值，border-image-slice必須指定數值，不然不合語法，以下：

border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;
複製代碼

八、參考資料：

border-image 的正確用法
CSS3 border-image 完全明白