1、border-image的兼容性
border-image能夠說是CSS3中的一員大將，未來必定會大放光彩，其應用潛力真的是很是的驚人。惋惜目前支持的瀏覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-image。因此，就本文而言，IE瀏覽器能夠回家休息了，Firefox3及其如下以及Opera瀏覽器也能夠休息去看《阿凡達》了。因此，本文提供的一些demo頁面，要在Firefox3.5+，chrome或Safari3+瀏覽器下才能夠看到效果。
web
2、熟悉border-image的一些特性
咱們可能對於CSS2中的background屬性比較熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是圖片(url(xx.jpg))，位置(27px)，重複性(no-repeat)。chrome
border-image於此相似，border-image包括圖片，剪裁位置（與background位置同樣，也是數值，也支持百分值），重複性。例如：border-image:url(border.png) 27 repeat;，指的就是圖片(url(border.png))，剪裁位置(27)，重複方式(repeat)。試着對比background，這有助於border-image屬性的記憶。瀏覽器
具體描述border-image的參數
border-image的參數就是上面提到的三個：圖片，剪裁位置，重複性。
一、圖片(border-image-source)
與CSS2中background-image屬性同樣，border-image的背景圖使用url()調用，圖片能夠是相對路徑或是絕對路徑，也能夠不使用圖片，即border-image:none;工具
二、圖片剪裁位置(border-image-slice)
此參數特色比較鮮明：
一、沒有單位，專指像素。這相似於flash的as腳本，舞臺高寬，影片剪輯大小，位移直接就是一個數值，沒有單位，由於默認單位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;這裏的27專指27像素。佈局
二、支持百分比值，百分比值大小事相對於邊框圖片而言，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。url
三、剪裁特性。若是您對CSS中clip屬性(clip:rect(auto, auto, auto, auto))比較瞭解，則這裏理解就會輕鬆些。clip能夠說是CSS中一個明目張膽的剪裁屬性，而此處的屬性雖然表意上不是剪裁，可是在border-image效果的實現上來講，就好像是個剪裁工具，把邊框圖片四分五裂，再從新安置，變形。其有1~4個參數，其方位規則符合CSS廣泛的方位規則（與margin，padding等或border-width一致），上右下左順時針，再賦予剪裁的含義，舉個簡單的例子，前面提到，支持百分比寬度，因此這裏「30% 35% 40% 30%的」示意能夠用下圖表示：3d
看圖說話就是，離圖片上部30%的地方剪裁一下，在右邊35%的地方剪裁一下，在離底部40%的地方裁剪一下，在距左邊30%的地方也剪裁一下。因而總共對圖片進行了「四刀切」，造成了九個分離的區域，這就是九宮格，這是下面深刻講解border-image的基礎。code
三、重複性(border-image-repeat)
這裏的重複性有別於background的背景重複，差異較大。background圖片就是重複，不重複，水平重複，垂直重複，總之就是圍繞repeat（重複）這個詞打轉，一家獨大。而對於border-image，可謂是三足鼎立，repeat（重複）只是其中之一，其他兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。blog
參數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（重複），至於何爲平鋪何爲重複下面會深刻講解。圖片
3、深刻理解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繪製原理簡述
我是這樣理解的：共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框自己，九個方位關係一一對應。邊框自己的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區域，正好造成一個九宮格。邊框圖片則是經過圖片剪裁實現了九宮格。這是理解繪製原理的基礎。
一、調用邊框圖片
border-image的url屬性，經過相對或絕對路徑連接圖片。
二、邊框圖片的剪裁
border-image的數值參數剪裁邊框圖片，造成九宮格。
三、剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應的關係放到div邊框的九宮格中，而後再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。
四、執行重複屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執行重複屬性的。上下的九宮格執行水平方向的重複屬性（拉伸或平鋪），左右的格子執行垂直方向的重複屬性，而中間的那個格子則水平重複和垂直方向的重複都要執行。
4、border-image的一些應用
自適應的圓角效果
使用圖片以下：
此圖片的剪裁寬度爲20像素，基本上就是此圖的圓角大小。div的邊框寬度爲10像素，其CSS核心樣式以下：
.border_image{
-moz-border-image:url(../image/rounded_corner.png) 20/10px;
-webkit-border-image:url(../image/border.png) 20/10px;
}
結果以下：
您能夠狠狠地點擊這裏： 圓角效果demo
多邊框效果
使用圖片以下：
圓角和邊框大小都是20，就不上CSS代碼了，大同小異。終效果以下圖：
您能夠狠狠地點擊這裏： 多邊框效果demo
投影效果
使用素材圖片以下：
剪裁寬度和邊框寬度都是2 5 6 2，這裏的投影我直接使用photoshop的投影樣式生成的，發現用在邊框投影上有一點點不足，須要手動調整，截取投影的四邊，以及重複區域再拼合一下，您能夠本身試試若是實現最佳的投影效果。
效果以下圖：
您能夠狠狠地點擊這裏： 投影效果demo
選項卡
自適應選項卡，CSS2中實現自適應選項卡須要將背景圖片製做的較長，並且須要兩層標籤，可是在CSS3中，圖片要短，且一個標籤就能夠搞定。例如，這是淘寶新首頁搜索選項卡的背景圖片（已剪裁），，要是使用border-image，只要值麼點圖就能夠了，
邊框圖片剪裁大小和邊框寬度都是5 5 0；底邊爲0，其他都是5像素，結果效果爲：