CSS border-image-repeat 屬性
示例
指定邊框影像如何重複
#borderimg {
border-image-source: url(border.png);
border-image-repeat: repeat;
}
自己動手試一試 »
定義和用法
border-image-repeat 屬性指定邊框影像是重複、圓角、間隔還是拉伸。
提示：還可以檢視 border-image 屬性（設定所有 border-image-* 屬性的簡寫屬性）。
| 預設值 | stretch |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.borderImageRepeat="round" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS 語法
border-image-repeat: stretch|repeat|round|space|initial|inherit;
注意：此屬性指定邊框影像的側面和中間部分的影像如何縮放和平鋪。因此，您可以在此處指定兩個值。如果省略第二個值，則假定它與第一個值相同。
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| stretch | 預設值。影像被拉伸以填充區域 | 演示 ❯ |
| 重複 | 影像被平鋪（重複）以填充區域 | 演示 ❯ |
| round | 影像被平鋪（重複）以填充區域。如果影像不能用整數塊填充區域，則會重新縮放影像使其適合 | 演示 ❯ |
| space | 影像被平鋪（重複）以填充區域。如果影像不能用整數塊填充區域，則額外的空間會分佈在影像塊周圍 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程：CSS 邊框影像
CSS 參考：border-image 屬性
CSS 參考：border-image-outset 屬性
CSS 參考：border-image-slice 屬性
CSS 參考：border-image-source 屬性
CSS 參考：border-image-width 屬性
HTML DOM 參考： borderImageRepeat 屬性
