border-image-width

語法:

border-image-width:[ <length> | <percentage> | <number> | auto ]{1,4}

預設值1

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

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

<length>
用長度值指定圖片邊框的厚度。不允許負值。
<percentage>
用百分比指定圖片邊框的厚度。參照圖片邊框區域的大小(包含border和padding)進行換算。不允許負值。
<number>
用浮點數指定圖片邊框的厚度。該值表示為border-width的倍數,若值為2,則使用值為2 * border-width。不允許負值。
auto:
如果auto值被設定,則border-image-width采用與border-image-slice相同的值。

說明:

定義元素邊框圖片的厚度。
  • 該屬性用於指定使用多厚的邊框來承載被裁剪後的圖片。
  • 當該屬性省略未定義時,因為預設值是1,所以該屬性的計算值會是1 * border-width,相當於會直接使用border-width的定義。

    舉個例子:

    .demo { border-width: 10px; border-style: solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; }

    這個例子中,border-image-width省略未定義,所以border-image-width將會使用border-width所定義的值。

    從這個例子的可以看到,以下三種情況是等效的:

    • border-image-width省略未定義;
    • border-image-width屬性值為1
    • border-image-width屬性值為10px
  • 當該屬性的值定義為auto,將會直接使用border-image-slice的定義。

    舉個例子:

    .demo { border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; } .demo { border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; border-image-width: auto; }

    上面 2 段程式碼是等效的。

  • 當該屬性的值定義為百分比時,其垂直和水平方向的計算值要分別參照圖片邊框區域的的寬和高進行換算

    舉個例子:

    .demo { width: 200px; height: 100px; padding: 20px; border: 10px solid; border-image-source: linear-gradient(red, yellow); border-image-slice: 5; border-image-width: 10%; }

    此時,border-image-width的計算值是16px 26px。即,垂直方向:(100+20*2+10*2)*10%=16px,水平方向:(200+20*2+10*2)*10%=26px

  • 對應的腳本特性為:borderImageWidth

兼容性:

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

示例: