border-image-repeat

語法:

border-image-repeat:[ stretch | repeat | round | space ]{1,2}

預設值stretch

適用於:所有元素,除table元素設定了border-collapse屬性值為collapse之外

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

stretch:
將被分割的圖片使用拉伸的方式來填充滿邊框圖片區域。
repeat:
將被分割的圖片使用重復平鋪的方式來填充滿邊框圖片區域。當圖片碰到邊界時,如果超過則被截斷。
round:
與 repeat 關鍵字類似。不同在於,當背景圖片不能以整數次平鋪時,會根據情況縮放圖片。
space:
與 repeat 關鍵字類似。不同在於,當背景圖片不能以整數次平鋪時,會用空白間隙填充在圖片周圍。

說明:

定義分割圖片怎樣填充邊框圖片區域。
  • 該屬性接受1~2個參數值,如果提供兩個參數,第一個用於水平方向,第二個用於垂直方向;只提供一個,則水平和垂直方向都應用該值。
  • 對應的腳本特性為:borderImageRepeat

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 10.0 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
11.0+
round 10.0 40.0+ 40.0+ 8.0-9.0 #1 40.0+ 8.0-9.2 #1 4.4+ 28.0+
11.0+ 9.1+ 9.3+
space 10.0 40.0-49 #2 40.0-62.0? #2 8.0-9.0 #2 40.0-50.0? #2 8.0-9.2 #2 4.4-62.0? #2 40.0-62.0? #2
11.0+ 50.0+ 63.0+ 9.1+ 51.0+ 9.3+ 63.0+
  1. 不支援round關鍵字,最後表現與 repeat 關鍵字一致;
  2. 不支援space關鍵字,最後表現與 repeat 關鍵字一致;

示例: