border-image

語法:

border-imageborder-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat

預設值看每個獨立屬性

適用於:看每個獨立屬性

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

取值:

border-image-source
定義元素邊框背景圖片,可以是圖片路徑或使用漸變建立的“背景圖片”。
border-image-slice
定義元素邊框背景圖片從什麼位置開始分割。
border-image-width
定義元素邊框背景圖片厚度。
border-image-outset
定義元素邊框背景圖片的外延尺寸。
border-image-repeat
定義元素邊框背景圖片的平鋪方式。

說明:

簡寫屬性。定義將圖片應用到元素的邊框上
  • 使用圖片替代border-style去定義邊框樣式。當border-imagenone或圖片不可見時,將會顯示border-style所定義的邊框樣式效果。

    示例:

    .test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

    如果例子中的圖片不可見,或者未被載入,則會以border的定義呈現,如果圖片載入成功,則以border-image的定義呈現。

  • border-image屬性生效的前提是定義了border-widthborder-style
  • 對應的腳本特性為:borderImage

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 10.0 40.0-49 #2 40.0-50.0 #1 #2 8.0-9.0 #1 #2 #3 40.0+ #2 8.0-9.2 #1 #2 #3 4.4-62.0 #1 #2 40.0-50.0 #1 #2
11.0 50.0+ 51.0-64.0 #2 9.1-11.1 #1 9.3-11.3 #1 51.0-64.0 #2
12.0-13.0 #1
14.0+
  1. border-style屬性值為none時,border-image仍然會奏效,See
  2. 不支援border-image-repeat屬性的space取值;
  3. 不支援border-image-repeat屬性的round取值;

示例: