mask-border-outset
語法
css
/* <length> value */
mask-border-outset: 1rem;
/* <number> value */
mask-border-outset: 1.5;
/* top and bottom | left and right */
mask-border-outset: 1 1.2;
/* top | left and right | bottom */
mask-border-outset: 30px 2 45px;
/* top | right | bottom | left */
mask-border-outset: 7px 12px 14px 5px;
/* Global values */
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: revert;
mask-border-outset: revert-layer;
mask-border-outset: unset;
mask-border-outset 屬性可以指定為一個、兩個、三個或四個值。每個值都是一個 <length> 或 <number>。負值無效。
- 當指定一個值時，它會將相同的偏移量應用於所有四個邊。
- 當指定兩個值時，第一個偏移量應用於頂部和底部，第二個應用於左側和右側。
- 當指定三個值時，第一個偏移量應用於頂部，第二個應用於左側和右側，第三個應用於底部。
- 當指定四個值時，偏移量按順序（順時針）應用於頂部、右側、底部和左側。
值
<length>-
作為尺寸的遮罩邊框偏移量。
<number>-
作為對應
border-width倍數的遮罩邊框偏移量。
正式定義
正式語法
mask-border-outset =
[ <length> | <number> ]{1,4}
示例
基本用法
此屬性似乎尚未在任何地方得到支援。當它最終開始被支援時，它將用於將遮罩從元素邊框盒的內邊緣移開——你可以使用它來使遮罩從邊框的一部分開始，而不是從內部開始。
css
mask-border-outset: 1rem;
基於 Chromium 的瀏覽器支援此屬性的過時版本——mask-box-image-outset——帶有字首。
css
-webkit-mask-box-image-outset: 1rem;
注意：mask-border 頁面提供了一個工作示例（使用 Chromium 支援的過時帶字首的邊框遮罩屬性），因此您可以瞭解其效果。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-mask-border-outset |
瀏覽器相容性
載入中…