mask-border-width
語法
css
/* Keyword value */
mask-border-width: auto;
/* <length> value */
mask-border-width: 1rem;
/* <percentage> value */
mask-border-width: 25%;
/* <number> value */
mask-border-width: 3;
/* top and bottom | left and right */
mask-border-width: 2em 3em;
/* top | left and right | bottom */
mask-border-width: 5% 15% 10%;
/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;
/* Global values */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: revert-layer;
mask-border-width: unset;
mask-border-width 屬性可以使用下面列表中的一個、兩個、三個或四個值來指定。
- 當指定一個值時，它將相同的寬度應用於所有四個邊。
- 當指定兩個值時，第一個寬度應用於頂部和底部，第二個寬度應用於左側和右側。
- 當指定三個值時，第一個寬度應用於頂部，第二個寬度應用於左側和右側，第三個寬度應用於底部。
- 當指定四個值時，寬度按頂部、右側、底部和左側的順序（順時針）應用。
值
<length-percentage>-
遮罩邊框的寬度，指定為
<length>或<percentage>。百分比是相對於水平偏移的邊框區域的寬度和垂直偏移的邊框區域的高度。不能為負值。 <number>-
遮罩邊框的寬度，指定為相應
border-width的倍數。不能為負值。 auto-
遮罩邊框的寬度等於相應
mask-border-slice的固有寬度或高度（以適用者為準）。如果影像不具有所需的固有尺寸，則使用相應的border-width代替。
正式定義
正式語法
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
示例
基本用法
mask-border-width 定義了邊框遮罩的寬度——將其設定為與 mask-border-slice 不同的值將導致切片縮放以適應邊框遮罩。
css
/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;
基於 Chromium 的瀏覽器支援此屬性的舊版本 — mask-box-image-width — 帶有字首。
css
-webkit-mask-box-image-width: 20px;
注意：mask-border 頁面提供了一個工作示例（使用 Chromium 支援的過時帶字首的邊框遮罩屬性），因此您可以瞭解其效果。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-mask-border-width |
瀏覽器相容性
載入中…