沒用border-image之前，覺得css的屬性基本夠用，border-image完全是將簡單的工作複雜化，當學習完該屬性以後，發現該屬性的運用能夠大大節省編碼時間和效率，總結一下，大致適用於以下兩個場景：
元素邊框不規則的情況。這時候，就需要用設計圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用**控制邊框背景的拉伸和重複，因而能夠創造出更多樣的效果
按鈕寬高不確定的情況。用border-image來製作按鈕，可以用同一張背景圖，製造出各種寬高的按鈕。
邊框向內偏移的距離。格式：border-image-slice：top right bottom left。分別指切割背景的四條線距離上右下左的距離。 如下圖所示：
該距離接受數值，百分數。預設數值的單位是px,但是不能在數值後面加px，否則這句css將不被瀏覽器解析。
用法和margin，padding類似。這裡以數值舉例，百分數同理。
border-image-slice
: 10;
/*距離上下左右均為10px;*/
border-image-slice
: 10
30;/*距離上下10px,左右30px;*/
border-image-slice
: 10
3020;
/*距離上10px,下20px,左右30px;*/
border-image-slice
: 10
3020
40;/*距離上10px,右30px,下20px,左40px;*/
border-image-slice: 25 11 fill;邊框的寬度。只接受數值，且不能加單位。
影象邊框是否應平鋪(repeat)、鋪滿(rounded)或拉伸(stretch)。而無論怎樣鋪，四個角，即區域1,3,7,9是不會重複鋪，只會被相應拉伸。下面以最為經典的圖為例吧：
原圖如下：
stretch(預設值)
.box
"box"
>
可以看到每個區域都被橫向和縱向拉伸了
repeat
.box
"box"
>
round
.box
"box"
>
同樣是重複平鋪，但是round會處理得更平滑，不會出現斷層情況，因此round通常比repeat更常用。
邊框影象區域超出邊框的量。格式：border-image-outset : length | number。length是數值加單位「px」，number指的是相對於邊框寬度增加的倍數。下面舉例來說明：
length
box
"box"
>
其中青綠色的區域是擴充套件出來的內容寬度10px
number
body
box"box"
>
border的寬度是27px，設定超出1倍，就是超出27px，即圖中青綠色區域。大家可以試試不加body的padding屬性，會發現div顯示不完整。所以，想要擴充套件div的大小直接設定width和height就好了，用boder-image-outset有點雞肋。
新版chrome瀏覽器border-image屬性不生效
在stack overflow找到答案，說是在用border-image屬性之前加上該屬性即可：border：27px solid transparent；後看到國內某博主說只要設定成border: 27px soild就行。後經嘗試，確實如此 。
復合屬性需要新增瀏覽器字首，單個屬性不需新增字首
當使用復合屬性時，需要新增字首，像這樣：
border-image: url("img/border.png") fill 10; /*ie11*/
-webkit
-border
-image: url("img/border.png") 10; /*chrome和safari*/
-moz
-border
-image: url("img/border.png") fill 10; /*firefox*/
-o-border
-image: url("img/border.png") 10; /*opera*/
先來乙個短一點的按鈕。
.box
"box"
>
現在僅僅修改「width:200px」,結果按鈕的長度就自動增加了，是不是很方便？
關於border image屬性
border image屬性把邊框的背景設定為。詳細解析可以檢視該 一 瀏覽器對它的支援 firefox3.5 firefox15 需要加 moz 字首 firefox15以上 同樣支援 moz 字首的css 但是必須在css 中加入border style solid 否則不會看到效果。chrom...
border image屬性深入剖析
border image簡寫 border image source slice width outset repeat 不簡寫，單獨設定屬性，屬性如下 屬性屬性值 作用border image source xx數字 相應的border width倍數 xxpx xx fill 保留中心部分 邊界...
詳解css樣式中的border image
border image source 屬性設程式設計客棧置邊框的的路徑 none 程式設計客棧gt div border image slice 屬性邊框向內偏移 1,4 fill div border image width 屬性設定邊框的寬度 auto 1,4 div border image...