CSS3 border-image-repeat 屬性


實(shí)例

設(shè)置重復(fù)圖像的方式：

div{
   border-image-source: url(border.png);
   border-image-repeat: repeat;
}

嘗試一下 ?

定義和使用

border-image-repeat 屬性用于圖像邊界是否應(yīng)重復(fù)（repeated）、拉伸（stretched）或鋪滿（rounded）。

提示:你可以查看 border-image 屬性(簡(jiǎn)寫屬性用于設(shè)置所有 border-image-* 屬性)。 

默認(rèn)值:stretch
繼承性:no
動(dòng)畫:no. 查看 animatable
版本:CSS3
JavaScript 語(yǔ)法:object.style.borderImageRepeat="round"嘗試一下

瀏覽器支持

表格中的數(shù)字表示支持該事件的第一個(gè)瀏覽器的版本號(hào)。

屬性     
border-image-repeat15.011.015.06.015.0

CSS 語(yǔ)法

border-image-repeat: stretch|repeat|round|initial|inherit;

注意： 該屬性規(guī)定如何延展和鋪排邊框圖像的邊緣和中間部分。因此，您可以規(guī)定兩個(gè)值。如果省略第二個(gè)值，則采取與第一個(gè)值相同的值。

屬性值

值描述實(shí)例
stretch默認(rèn)值。拉伸圖像來(lái)填充區(qū)域查看實(shí)例 ?
repeat平鋪（repeated）圖像來(lái)填充區(qū)域。查看實(shí)例 ?
round類似 repeat 值。如果無(wú)法完整平鋪所有圖像，則對(duì)圖像進(jìn)行縮放以適應(yīng)區(qū)域。查看實(shí)例 ?
space類似 repeat 值。如果無(wú)法完整平鋪所有圖像，擴(kuò)展空間會(huì)分布在圖像周圍 
initial將此屬性設(shè)置為默認(rèn)值。查看 initial查看實(shí)例 ?
inherit從父元素中繼承該屬性。 查看 inherit 

相關(guān)頁(yè)面

CSS3 教程: CSS3 邊框

CSS 參考手冊(cè): border-image 屬性

CSS 參考手冊(cè): border-image-repeat 屬性

CSS 參考手冊(cè): border-image-slice 屬性

CSS 參考手冊(cè): border-image-source 屬性

CSS 參考手冊(cè): border-image-width 屬性

HTML DOM 參考手冊(cè): borderImageRepeat 屬性