`mask-border-outset` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die mask-border-outset-Eigenschaft in CSS gibt den Abstand an, um den der Maskenrand eines Elements von seinem Randkasten ausgeht.

Syntax

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;

Die mask-border-outset-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist eine <length> oder <number>. Negative Werte sind ungültig.

Wenn ein Wert angegeben wird, gilt dieser für alle vier Seiten.
Wenn zwei Werte angegeben werden, gilt der erste Wert für oben und unten, der zweite für links und rechts.
Wenn drei Werte angegeben werden, gilt der erste Wert für oben, der zweite für links und rechts, der dritte für unten.
Wenn vier Werte angegeben werden, gelten die Abstände für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).

Werte

<length>: Die Größe des Maskenrandabstands als Maß.
<number>: Die Größe des Maskenrandabstands als Vielfaches der entsprechenden border-width.

Formale Definition

Anfangswert	`0`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	diskret

Formale Syntax

mask-border-outset = 
  <'border-image-outset'>  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

Diese Eigenschaft scheint bisher nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Maske vom inneren Rand des Randkastens des Elements wegzubewegen — Sie können sie verwenden, um die Maske ab einem Teil des Randes und nicht von innen beginnen zu lassen.

css

mask-border-outset: 1rem;

Chromium-basierte Browser unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-outset — mit einem Präfix:

css

-webkit-mask-box-image-outset: 1rem;

Hinweis: Die Seite mask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten maskenrandbezogenen Eigenschaften mit Präfix in Chromium), sodass Sie eine Vorstellung vom Effekt bekommen können.