CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 border-image-slice 屬性 CSS3 border-image-outset 屬性

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

border-image-repeat CSS屬性指定如何縮放或平鋪邊框圖像的中間部分，以使其可以匹配邊框的大小。

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

默認(rèn)值：	stretch
適用于：	所有元素，但當(dāng)表格元素（如 tr,th,td ）的border-collapse屬性值為collapse時(shí)border-image-repeat屬性無效。它也適用于::first-letter。
繼承：	沒有
可動(dòng)畫制作：	否。請(qǐng)參見動(dòng)畫屬性。
版本：	CSS3的新功能
JavaScript 語法:	object.style.borderImageRepeat="round"

border-image-repeat的使用語法

該屬性的語法如下：

border-image-repeat: [ stretch | repeat | round | space ] 1 or 2 values | initial | inherit

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

示例

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-repeat: round;
}

測(cè)試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
stretch	圖像被拉伸以填充邊框邊緣之間的區(qū)域。這是默認(rèn)值。
repeat	圖像被平鋪或重復(fù)，直到它填滿邊框邊緣之間的區(qū)域。
round	圖像被平鋪或重復(fù)，直到它填滿邊框邊緣之間的區(qū)域。如果該區(qū)域無法填充完整數(shù)量的圖塊，則將圖像縮放以使其縮放。
space	圖像被平鋪或重復(fù)，直到它填滿邊框邊緣之間的區(qū)域。如果該區(qū)域無法填充全部瓷磚，則多余的空間將分布在瓷磚周圍。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素border-image-repeat屬性的計(jì)算值。

瀏覽器兼容性

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

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

進(jìn)一步閱讀

請(qǐng)參考教程：CSS3邊框，CSS邊框。

相關(guān)屬性：border-image，border-image-source，border-image-slice，border-image-width，border-image-outset，border。

CSS3 border-image-slice 屬性 CSS3 border-image-outset 屬性