為邊框應用圖片 border-image
顧名思義就是為邊框應用背景圖片，它和我們常用的background屬性比較相似。例如：
background:url(xx.jpg) 10px 20px no-repeat;
但是又比背景圖片復雜一些。
想象一下：一個矩形，有四個邊框。如果應用了邊框圖片，圖片該怎么分布呢？ 圖片會自動被切割分成四等分。用於四個邊框。
可以理解為它是一個切片工具，會自動把用做邊框的圖片切割。怎么切割呢？為了方便理解，做了一張特殊的圖片，由9個矩形（70*70像素）拼成的一張圖（210*210像素），並標注好序號，是不是像傳說中的九宮圖，如下：
我們把上圖當作邊框圖片 來應用一下， 看一看是什么效果
根據border-image的語法：
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}
效果：
從序號可以看出div的四個角分別對應了背景圖片的四個角。而2,4,6,8 被重復。5在哪？因為是從四周向中心切割圖片的所以，5顯示不出來。而在chrome瀏覽器中5是存在的，下圖的樣子：
repeat的意思就是重復，目前因為是剛好被整除，效果看不出來。如果改下DIV的寬高，再來看重復的效果：
邊角部分為裁掉了，可見repeat就是一直重復，然后超出部分剪裁掉，而且是居中開始重復。
Round 參數：Round可以理解為圓滿的鋪滿。為了實現圓滿所以會壓縮（或拉伸）；
#border-image {
width:170px;
height:170px;
border:70px solid;
border-image:url(borderimg.png) 70 round;
}
效果：
可見圖片被壓扁了。
Stretch 很好理解就是拉伸，有多長拉多長。有多遠“滾”多遠。
border-image:url(borderimg.png) 70 stretch
看一下效果：
2,4,6,8分別被拉伸顯示。
注意：Chrome下，中間部分也會被拉伸，webkit瀏覽器對於round屬性和repeat屬性似乎沒有區分，顯示效果是一樣的。
Firefox 26.0 下是可以准確區分的。