1、border-image 描述、語法
在CSS3之前，border只能簡單的設置一些純色或幾種簡單的線型（如solid,dotted,double,dashed等）。
在CSS3中，border-image實現了給邊框設置不同的圖片效果。
border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
提示：border-image 實際應用中屬性是不能分解的
CSS3 border-image的參數： 1、none:是border-image的默認值，如果取值為none時，表示邊框無背景圖片； 2、<image>：設置border-image的背景圖片，這個跟background-image一樣，使用絕對或相對的url地址，來指定背景圖片； 3、<number>：number是一個數值，用來設置邊框的寬度，其單位是px，其實就像border-width一樣取值，可以使用1~4個值，其具體表示四個方位的值，大家可以參考border-width的設置方式； 4、<percntage>：percntage也是用來設置邊框的寬度，跟number不同之處是，其使用的是百分比值來設置邊框寬度； 5、stretch,repeat,round:用來設置邊框背景圖片的鋪放方式，類似於background-position，其中stretch是拉伸（默認值），repeat是重復，round是平鋪。
參考： border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
==>border-image-slice（用來分解引入進來的背景圖片）
border-image-slice: [ <number> | <percentage>]{1,4}&& fill?
取值：支持:<number> | <percentage>；
其中number是沒有單位的，專指像素px，因為其默認的單位就是像素px，所以在使用number時不需要加上單位，如果加上了單位反而是錯誤的寫法。
percentage百分比值來表示，百分比的值是相對於邊框背景圖片而言的，例如邊框圖片的大小是300px*240px,我們取百分比為25% 30% 15% 20%，那么它們實際對應的效果就是剪切了圖片的60px 90px 36px 60px的四邊大小。（如下圖）
如上圖所示:border-image-slice中的number或者percentage都可取1~4個值，也是遵從top,right,bottom,left的規則。
border-image-slice:fill；從字面上說是就是填充，如果使用這個關鍵字時，圖片邊界的中間部分將保留下來。默認情況下是為空的。
==>border-image-repeat（用來指定border-image的排列方式）
這個屬性設置參數和其他的不一樣，border-image-repeat不遵循top,right,bottom,left的方位原則，他只接受兩個（或一個）參數值，第一個表示水平方向，第二個表示垂直方向；當取值為一個值時，表示水平和垂直方向的排列方式相同。同時其默認值是stretch，如果你省略不取值時，那么水平和垂直方向都是以stretch排列。
2、border-image 兼容
更多兼容情況：
3、border-image 用法
/*Mozilla內核Firefox*/ -moz-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’> /*Webkit內核Safari and Chrome*/ -webkit-border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’> /*Opera*/ -oborder-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’> /*W3C標准*/ border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
實例： 九宮格
（把取到的圖片進行四刀切后，切成了九份，再像background-image一樣重新布置。按照它的1～4個參數，類似於border-width的方位規則，再把剪切到的圖片重新分布給他們。）
展示效果區域：1、2、3、4、6、7、8、9
無展示效果區域：5 （盲區）
-webkit-border-image: url("../images/border.png") 27 round stretch;
-moz-border-image: url("../images/border.png") 27 round stretch;
-o-border-image: url("../images/border.png") 27 round stretch;
border-image: url("../images/border.png") 27 round stretch;
4、更多實例：CSS3 Border-image