border-image-slice

語法:

border-image-slice:[ <number> | <percentage> ]{1,4} && fill?

預設值100%

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

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

<number>
用浮點數指定圖片分割的位置。數字代表在圖片上的像素位置或向量坐標。不允許負值。
<percentage>
用百分比指定圖片分割的位置。垂直和水平方向的百分比分別參照圖片的寬和高進行換算。不允許負值。
fill:
保留裁減後的中間區域,其鋪排方式遵循border-image-repeat的定義。

說明:

用以指定從哪 4 個位置分割圖片(遵循上右下左的順序)。
  • 該屬性指定從上,右,下,左 4 個方位來分割圖片,將圖片分紅4個角,4條邊和中間區域共9份,中間區域始終是透明的(即沒圖片填充),除非加上關鍵字fill

    圖片分割示例:

    圖片分割示例
    (圖一)此圖修改於 w3.org 的示例
    .demo { border-image-slice: 25% 30% 12% 20%; }

    圖一中 A, B, C, D 表示從上右下左對圖片進行4次分割。圖片被分割成 1, 2, 3, 4 這4個角和 5, 6, 7, 8 這4條邊,最後包括中間部分9。其中中間的部分 9 預設不會被圖片填充,除非定義了關鍵字fill

  • fill關鍵字外,該屬性接受1~4個參數值,如果提供全部四個參數值,將按上、右、下、左的順序進行分割;提供三個,第一個用於上,第二個用於左、右,第三個用於下;提供兩個,第一個用於上、下,第二個用於左、右;只提供一個,上右下左都使用該值進行分割。
  • 對應的腳本特性為:borderImageSlice

兼容性:

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

示例: