顧名思義就是為邊框應用背景圖片，它和我們常用的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 下是可以準確區分的。