圖像邊框 border-image屬性

border-image 屬性最簡單的使用方法以下所示：

border-image:url( 圖像文件的路徑) A B C D 

-webkit-border-image:url( 圖像文件的路徑) A B C D 

-moz-border-image:url( 圖像文件的路徑) A B C D

第一個參數爲邊框所使用的圖像文件的路徑，A B C D 四個參數標示當瀏覽器自動把邊框所使用到的圖像進行分割時上邊距、右邊距、下邊距及左邊距。

也能夠指定邊框寬度：

border-image:url( 圖像文件的路徑) A B C D /border-width

border-width表示邊框的寬度，固然也能夠四個邊框不同寬，寫四個值分別對應左上右下邊

也能夠設置四個邊中圖像的顯示方法

border-image:url( 圖像文件的路徑) A B C D /border-width  topbottom leftright

topbottom 表示元素上下兩條邊中圖像的顯示方法

leftright 表示元素的左右兩條邊的顯示方法

在顯示方法中能夠指定值爲 repeat stretch round 三種

repeat：圖像將以平鋪的方式進行顯示

stretch：圖像將以拉伸的方式進行顯示（四條邊中的圖像均已拉伸方式顯示，中間的圖像也以拉伸的方式顯示）

repeat+stretch：上下邊平鋪，左右邊拉伸

round：與將顯示方法指定爲 repeat 時相似，都是平鋪，只是最後顯示的一幅圖不能徹底顯示的時候，不超過圖像的一半則捨去，前面的擴大；若是超過一半，則徹底顯示，前面的壓縮

在使用 border-image 屬性的時候，仍然能夠正常使用背景圖像，可是爲了避免讓邊框圖像擋住背景圖像，須要使用中間爲透明的邊框圖像，不然背景圖像就有可能被邊框圖像的中間擋住。