顧名思義就是為邊框應(yīng)用背景圖片，它和我們常用的background屬性比較相似。例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景圖片復(fù)雜一些。

想象一下：一個(gè)矩形，有四個(gè)邊框。如果應(yīng)用了邊框圖片，圖片該怎么分布呢？ 圖片會(huì)自動(dòng)被切割分成四等分。用于四個(gè)邊框。

可以理解為它是一個(gè)切片工具，會(huì)自動(dòng)把用做邊框的圖片切割。怎么切割呢？為了方便理解，做了一張?zhí)厥獾膱D片，由9個(gè)矩形（70*70像素）拼成的一張圖（210*210像素），并標(biāo)注好序號(hào)，是不是像傳說(shuō)中的九宮圖，如下：

我們把上圖當(dāng)作邊框圖片 來(lái)應(yīng)用一下， 看一看是什么效果

根據(jù)border-image的語(yǔ)法：

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

效果：

從序號(hào)可以看出div的四個(gè)角分別對(duì)應(yīng)了背景圖片的四個(gè)角。而2,4,6,8 被重復(fù)。5在哪？因?yàn)槭菑乃闹芟蛑行那懈顖D片的所以，5顯示不出來(lái)。而在chrome瀏覽器中5是存在的，下圖的樣子：



repeat的意思就是重復(fù)，目前因?yàn)槭莿偤帽徽?，效果看不出?lái)。如果改下DIV的寬高，再來(lái)看重復(fù)的效果：

邊角部分為裁掉了，可見(jiàn)repeat就是一直重復(fù)，然后超出部分剪裁掉，而且是居中開(kāi)始重復(fù)。

Round 參數(shù)：Round可以理解為圓滿的鋪滿。為了實(shí)現(xiàn)圓滿所以會(huì)壓縮（或拉伸）；

#border-image {

     width:170px;

     height:170px;

     border:70px solid;

     border-image:url(borderimg.png) 70 round;

 }

效果：

可見(jiàn)圖片被壓扁了。

Stretch 很好理解就是拉伸，有多長(zhǎng)拉多長(zhǎng)。有多遠(yuǎn)“滾”多遠(yuǎn)。

border-image:url(borderimg.png) 70 stretch

看一下效果：

2,4,6,8分別被拉伸顯示。

注意：Chrome下，中間部分也會(huì)被拉伸，webkit瀏覽器對(duì)于round屬性和repeat屬性似乎沒(méi)有區(qū)分，顯示效果是一樣的。

Firefox 26.0 下是可以準(zhǔn)確區(qū)分的。