CSS3 border-image-repeat 屬性


實例

設置重復圖像的方式：

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

嘗試一下 ?

定義和使用

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

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

默認值:stretch
繼承性:no
動畫:no. 查看 animatable
版本:CSS3
JavaScript 語法:object.style.borderImageRepeat="round"嘗試一下

瀏覽器支持

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

屬性     
border-image-repeat15.011.015.06.015.0

CSS 語法

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

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

屬性值

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

相關頁面

CSS3 教程: CSS3 邊框

CSS 參考手冊: border-image 屬性

CSS 參考手冊: border-image-repeat 屬性

CSS 參考手冊: border-image-slice 屬性

CSS 參考手冊: border-image-source 屬性

CSS 參考手冊: border-image-width 屬性

HTML DOM 參考手冊: borderImageRepeat 屬性