CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 border-image-outset 屬性 CSS border-color 屬性

CSS3 border-image 屬性使用方法及示例

border-image CSS屬性如何使用圖像代替邊框樣式。這是一個簡寫屬性，用于同時設置border-image-source，border-image-slice，border-image-width，border-image-outset和border-image-repeat屬性

下表為此屬性的用法說明和版本歷史記錄，以及該屬性在javascript腳本中的使用語法。

默認值：	none 100 stretch; 查看全部屬性
適用于：	該屬性能被應用于任何元素，但當表格元素（如 tr,th,td ）的border-collapse屬性值為collapse時border-image屬性無效。它也適用于::first-letter。
繼承：	沒有
可動畫制作：	否。請參見動畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.borderImage="url(border.png) 30 30 round"

border-image的使用語法

該屬性的語法如下：

border-image: [ source slice width outset repeat ] | initial | inherit

下面的示例演示了如何使用border-image屬性。

示例

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}

測試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
border-image-source	指定要用于邊框的圖像的位置。
border-image-slice	指定距邊框圖像的頂部，右側，底部和左側邊緣的向內偏移。
border-image-width	指定邊框的寬度。
border-image-outset	指定邊框圖像區(qū)域超出邊框，超出范圍的數(shù)量。
border-image-repeat	指定如何縮放或平鋪邊框圖像的中間部分，使其可以匹配邊框的大小。
initial	將此屬性設置為其默認值。
inherit	如果指定，則關聯(lián)元素采用其父元素border-image屬性值。

瀏覽器兼容性

border-image屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該屬性。

	Firefox 3.5+ ^-moz-，15 + Google Chrome 4+ ^-webkit-，16 + Internet Explorer 11+ Apple Safari 3.1+ ^-webkit-，6+ Opera 11+ ^-o-，15+ ^-webkit-

進一步閱讀

請參考以下教程：CSS3 Border和CSS Border。

CSS3 border-image-outset 屬性 CSS border-color 屬性