一、border-image的兼容性
border-image可以說是CSS3中的一員大將，將來一定會大放光彩，其應用潛力真的是非常的驚人。可惜目前支持的瀏覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-image。所以，就本文而言，IE瀏覽器可以回家休息了，Firefox3及其以下以及Opera瀏覽器也可以休息去看《阿凡達》了。所以，本文提供的一些demo頁面，要在Firefox3.5+，chrome或Safari3+瀏覽器下才可以看到效果。
二、熟悉border-image的一些特性
我們可能對於CSS2中的background屬性比較熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是圖片(url(xx.jpg))，位置(27px)，重複性(no-repeat)。
border-image於此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數值，也支持百分值），重複性。例如：border-image:url(border.png) 27 repeat;，指的就是圖片(url(border.png))，剪裁位置(27)，重複方式(repeat)。試着對比background，這有助於border-image屬性的記憶。
具體描述border-image的參數
border-image的參數就是上面提到的三個：圖片，剪裁位置，重複性。
1、圖片(border-image-source)
與CSS2中background-image屬性一樣，border-image的背景圖使用url()調用，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;
2、圖片剪裁位置(border-image-slice)
此參數特點比較鮮明：
1、沒有單位，專指像素。這類似於flash的as腳本，舞臺高寬，影片剪輯大小，位移直接就是一個數值，沒有單位，因爲默認單位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;這裏的27專指27像素。
2、支持百分比值，百分比值大小事相對於邊框圖片而言，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。
3、剪裁特性。如果您對CSS中clip屬性(clip:rect(auto, auto, auto, auto))比較瞭解，則這裏理解就會輕鬆些。clip可以說是CSS中一個明目張膽的剪裁屬性，而此處的屬性雖然表意上不是剪裁，但是在border-image效果的實現上來說，就好像是個剪裁工具，把邊框圖片四分五裂，再重新安置，變形。其有1~4個參數，其方位規則符合CSS普遍的方位規則（與margin，padding等或border-width一致），上右下左順時針，再賦予剪裁的含義，舉個簡單的例子，前面提到，支持百分比寬度，所以這裏“30% 35% 40% 30%的”示意可以用下圖表示：
看圖說話就是，離圖片上部30%的地方剪裁一下，在右邊35%的地方剪裁一下，在離底部40%的地方裁剪一下，在距左邊30%的地方也剪裁一下。於是總共對圖片進行了“四刀切”，形成了九個分離的區域，這就是九宮格，這是下面深入講解border-image的基礎。
3、重複性(border-image-repeat)
這裏的重複性有別於background的背景重複，差別較大。background圖片就是重複，不重複，水平重複，垂直重複，總之就是圍繞repeat（重複）這個詞打轉，一家獨大。而對於border-image，可謂是三足鼎立，repeat（重複）只是其中之一，其餘兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。
參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png)
30% 40%;就等同於border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重複），至於何爲平鋪何爲重複下面會深入講解。
三、深入理解border-image的寬度和展示方式
分開理解border-image的寬度或是展示方式其實不太難的，關鍵是這兩者結合使用時候的含義，需要花一定的功夫的理解。
幫助理解的九宮格模型
何爲九宮格？爲什麼我們需要九宮格幫助理解？
“九宮格”是我國書法史上臨帖寫仿的一種界格，又叫“九方格”，即在紙上畫出若干大方框，再於每個方框內分出九個小方格，以便對照法帖範字的筆畫部位進行練字。在本文，“九宮格”就專指由九個方格形成的矩形佈局，例如左圖就是一個很簡單的數字九宮格。
border-image的數值參數其實是用來剪裁邊框圖片的，正好“嘩嘩四刀”切出了個九宮格的模型，所以，有意或無意，巧合還是必然，我們需要用到九宮格模型幫助我們理解border-image的繪製原理。下面這張圖是本文非常重要的基本的示意圖，因爲這是張具有代表性的九宮格圖案(27*3)*(27*3)。
<————————>
這張圖能夠幫助我們更好的理解border-image的剪裁及繪製的原理。
邊框將border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中間的內容區域。假設現在邊框的寬度是27像素，則上面所說的九部分正如下圖所表示的（放大400%）：
左圖中，橙紅色的四個邊角的菱形區域稱爲“角邊框圖片”，在border-image中，角邊框圖片是沒有任何展示效果的，不會平鋪，不會重複，也不會拉伸，有點類似於視覺中盲點的意思。
而對邊的四個橙黃色區域屬於展示效果的作用區（也是邊框寬度計算剩餘區），上下區域即border-top-image和border-bottom-image區域受到展示效果屬性的第一個參數——水平方向效果影響：如果爲repeat，則此區域圖片會水平重複，如果是round，則此框框內的圖片會水平平鋪，如果是stretch，則此矩形域中的圖片就會被水平拉伸。（下部分的實例會做具體演示）左右區域只有垂直方向上的效果，與上下區域效果對應，不多說。
中間的區域（左圖的空白格）受到全部參數的作用，在水平和垂直兩個維度上都有展示效果（平鋪、拉伸等）。
border-image繪製原理簡述
我是這樣理解的：共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框本身，九個方位關係一一對應。邊框本身的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區域，正好形成一個九宮格。邊框圖片則是通過圖片剪裁實現了九宮格。這是理解繪製原理的基礎。
1、調用邊框圖片
border-image的url屬性，通過相對或絕對路徑鏈接圖片。
2、邊框圖片的剪裁
border-image的數值參數剪裁邊框圖片，形成九宮格。
3、剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應的關係放到div邊框的九宮格中，然後再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。
4、執行重複屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執行重複屬性的。上下的九宮格執行水平方向的重複屬性（拉伸或平鋪），左右的格子執行垂直方向的重複屬性，而中間的那個格子則水平重複和垂直方向的重複都要執行。