
邊框圖片border-image支援瀏覽器:
Google Chrome、Firefox、Safari
邊框圖片border-image語法:
border-image-source:邊框圖片來源
border-image-slice:邊框圖片分割,border-image-slice 會把圖片分成九公格,抓出圖片四角的圖片位置,分別為上、右、下、左,數字後面不可加單位。
![梅問題-CSS3-CSS3邊框圖片]()
border-image-width:邊框圖片寬度。
border-image-repeat:邊框圖片中間重覆設定,共有三個參數可作控制。
stretch:延展方式填滿。
repeat:重複方式填滿。
round:重複方式填滿。當無法以整數的倍數填滿時,就會依照整數倍數來縮放圖片並填滿。
space:重複填滿。用整數倍數填滿,其它不足的部分,再縮放圖片填滿。
![梅問題-CSS3-CSS3邊框圖片]()
border-image-slice:邊框圖片分割,border-image-slice 會把圖片分成九公格,抓出圖片四角的圖片位置,分別為上、右、下、左,數字後面不可加單位。

border-image-width:邊框圖片寬度。
border-image-repeat:邊框圖片中間重覆設定,共有三個參數可作控制。
stretch:延展方式填滿。
repeat:重複方式填滿。
round:重複方式填滿。當無法以整數的倍數填滿時,就會依照整數倍數來縮放圖片並填滿。
space:重複填滿。用整數倍數填滿,其它不足的部分,再縮放圖片填滿。

邊框圖片border-image實作:
/* Safari and Chrome */
-webkit-border-image-source: url(bdic.png);
-webkit-border-image-slice: 20;
-webkit-border-image-width: 1em;
-webkit-border-image-repeat: stretch;
/* Firefox */
-moz-border-image-source: url(bdic.png);
-moz-border-image-slice: 20;
-moz-border-image-width: 1em;
-moz-border-image-repeat: stretch;
/* CSS3 */
border-image-source: url(bdic.png);
border-image-slice: 20;
border-image-width: 1em;
border-image-repeat: stretch;
-webkit-border-image-source: url(bdic.png);
-webkit-border-image-slice: 20;
-webkit-border-image-width: 1em;
-webkit-border-image-repeat: stretch;
/* Firefox */
-moz-border-image-source: url(bdic.png);
-moz-border-image-slice: 20;
-moz-border-image-width: 1em;
-moz-border-image-repeat: stretch;
/* CSS3 */
border-image-source: url(bdic.png);
border-image-slice: 20;
border-image-width: 1em;
border-image-repeat: stretch;
邊框圖片border-image結果預覽:
#Google Chrome:

#Firefox:

#Safari:

[範例預覽] [範例下載]