一. 相容性
效果好不好都不要緊，第一重要的是相容性，結論：如果不用考慮 IE 瀏覽器的話，可以放心使用 border-image。具體請查看 caniuse
低版本的 Android 和 iOS Safari 都需要加供應商前綴才能生效，Opera 也需要添上前綴，所以為了最佳相容性，需要添上除 -ms- 以外的所有前綴（IE11/IE Mobile 11 直接遵循標準規範，[11-] 完全不支援）
二. 具體語法
常用的寫法：
border-image：url("bd.png") 10 20 30 40 repeat;
border-width: 10px 20px 30px 40px;
注意：10 20 30 40 是切分的位置，而且不能加 px、em 等單位，只能是數值（單位預設是 px）或者百分比。範例程式碼表示距上邊 10px，距右邊 20px，距下邊 30px，距左邊 40px 處都有切割線，四刀切出九宮格。這四個參數可以縮寫成 1、2 或者 3 個，規則和 border-width 一樣，屬性名稱是 border-image-slice
如果重複性是預設的 stretch，切出九宮格後規則是四角不變，其他格子內容都拉伸
repeat 參數也比較特別，因為不存在 no-repeat，只有 repeat（重複）、round（平鋪）和 stretch（拉伸）。預設值是stretch（拉伸）。注意平鋪和重複的區別：
這麼比方吧，您從萬科地產買了個 99.5m*99.5m 的毛胚屋，地面要貼瓷磚，都是 1m*1m 的正方形瓷磚。如果是「平鋪」，對不起，這 1m 邊長的瓷磚不行，要處理！怎麼處理法？很簡單，每個瓷磚壓成 0.995m*0.995m 的，這樣就可以了，所以，平鋪就是以完整的單元鋪滿整個區域。如果是重複，就直接把這 1m*1m 的瓷磚從一個角落一個一個地放置，放到頭放不下了怎麼辦？直接把瓷磚從中間「咔」掉，於是最後會在房子的邊角看到很多半截的瓷磚。
（引自 CSS3 border-image 詳解、應用及 jQuery 插件 ? 張鑫旭-鑫空間-鑫生活）
三. 小技巧
1. 保證 border-width 和 borer-image-slice 值相同
能夠避免多次縮放帶來的圖像失真
2. 如何保證兩端不縮放
有些時候需要保證兩端不縮放，比如 tab 頁標籤，保證左右兩端不縮放，只把中間部分拉長，解決方案如下：
-
先設置
border-image-slice的 top/bottom 值等於圖片高度，bottom/top 值為 0，這樣九宮格就少了 2 行（中間行和底部/頂部行）。剩餘的一行恰好是頂部行/底部行，左右兩端就不會縮放了 -
再設置
border-width的值與border-image-slice相同 -
子元素相對於父元素絕對定位，並設置負
margin（把子元素放在父元素的邊框上）因為父元素邊框已經佔用了子元素的位置，必須給子元素設置
position: absolute;讓它脫離標準文件流，不佔空間
3. 如何填充中心格
標準 border-image 實作中，中心格不會被填充，而 -webkit- 實作中心格會被填充，所以需要這樣做才能保證中心格被填充：
-moz-border-image: url("../img/btn-half.png") fill 36 20 0 20;
-o-border-image: url("../img/btn-half.png") 36 20 0 20;
-webkit-border-image: url("../img/btn-half.png") 36 20 0 20;
border-image: url("../img/btn-half.png") fill 36 20 0 20;
Opera 和 Chrome 的理解一致但與標準規範不同，而 Mozilla 符合標準實作
暫無評論，快來發表你的看法吧