語法
css
/* All sides */
mask-border-slice: 30%;
/* top and bottom | left and right */
mask-border-slice: 10% 30%;
/* top | left and right | bottom */
mask-border-slice: 30 30% 45;
/* top | right | bottom | left */
mask-border-slice: 7 12 14 5;
/* Using the `fill` keyword */
mask-border-slice: 10% fill 7 12;
/* Global values */
mask-border-slice: inherit;
mask-border-slice: initial;
mask-border-slice: revert;
mask-border-slice: revert-layer;
mask-border-slice: unset;
mask-border-slice 屬性可以使用一到四個 <number-percentage> 值來指定，以表示每個影像切片的位置。負值無效；大於其對應尺寸的值將被限制為 100%。
- 當指定一個位置時，它會在距離各自側面相同距離處建立所有四個切片。
- 當指定兩個位置時，第一個值建立從頂部和底部測量的切片，第二個值建立從左側和右側測量的切片。
- 當指定三個位置時，第一個值建立從頂部測量的切片，第二個值建立從左側和右側測量的切片，第三個值建立從底部測量的切片。
- 當指定四個位置時，它們按順序（順時針）建立從頂部、右側、底部和左側測量的切片。
可選的 fill 值（如果使用）可以放置在宣告中的任何位置。
值
<number>-
對於點陣圖影像，表示以畫素為單位的邊緣偏移量；對於向量影像，表示以座標為單位的邊緣偏移量。對於向量影像，該數字是相對於元素大小而不是源影像大小的，因此在這些情況下通常首選百分比。
<percentage>-
表示邊緣偏移量，作為源影像大小的百分比：水平偏移量為影像寬度，垂直偏移量為影像高度。
fill-
保留中間影像區域。其寬度和高度分別與頂部和左側影像區域匹配。
描述
切片過程總共建立九個區域：四個角、四條邊和一箇中間區域。四條切片線（與各自側面保持給定距離）控制區域的大小。
上圖展示了每個區域的位置。
- 區域 1-4 是角區域。每個區域僅使用一次，以形成最終邊框影像的角。
- 區域 5-8 是邊區域。這些區域在最終的邊框影像中會重複、縮放或以其他方式修改，以匹配元素的尺寸。
- 區域 9 是中間區域。預設情況下它會被丟棄，但如果設定了關鍵字
fill，則會像背景影像一樣使用它。
mask-border-repeat、mask-border-width 和 mask-border-outset 屬性決定了這些區域如何用於形成最終的遮罩邊框。
正式定義
正式語法
mask-border-slice =
[ <number> | <percentage> ]{1,4} fill?
示例
基本用法
mask-border-slice 用於定義從源影像中提取的切片大小，並用於建立邊框遮罩。
css
mask-border-slice: 30 fill;
基於 Chromium 的瀏覽器支援此屬性的過時版本 — mask-box-image-slice — 並帶有字首
css
-webkit-mask-box-image-slice: 30 fill;
注意：mask-border 頁面提供了一個工作示例（使用 Chromium 支援的過時帶字首的邊框遮罩屬性），因此您可以瞭解其效果。
注意： 如果您希望元素內容可見，則需要包含 fill 關鍵字。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # 遮罩邊框切片 |
瀏覽器相容性
載入中…