border-image-source

語法:

border-image-source:none | <image>

預設值none

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

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

none:
無背景圖片。
<image>
使用絕對或相對地址指或者建立漸變色來確定圖片。

說明:

定義元素邊框樣式所使用的圖片。
  • 指定一個圖片用來替代border-style所定義的邊框樣式。當border-imagenone或圖片不可見時,將會顯示border-style所定義的邊框樣式效果。
  • 除了直接使用圖片來作為邊框樣式外,還可以繪制漸變來作為邊框樣式。

    使用漸變繪製作為邊框樣式示例:

    漸變邊框效果
    .test { border: 10px solid; border-image: linear-gradient(red, yellow) 10; }

    在這個例子中,繪制了一個線性漸變作為圖片來替代邊框樣式,我們得到了一個漸變的邊框效果。

  • 對應的腳本特性為:borderImageSource

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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+ 40.0+
11.0+

示例: