mask-border-outset

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die mask-border-outset CSS Eigenschaft gibt an, um welchen Abstand der Maskenrand eines Elements von seiner Rahmenbox gesetzt wird.

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 entweder ein <length> oder ein <number>. Negative Werte sind ungültig.

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

Werte

<length>

Die Größe des Maskenrandabstands als Dimension.

<number>

Die Größe des Maskenrandabstands als Vielfaches der entsprechenden border-width.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstypdiskret

Formale Syntax

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

Beispiele

Grundlegende Verwendung

Diese Eigenschaft scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Maske vom inneren Rand der Rahmenbox des Elements wegzubewegen — Sie können sie verwenden, um die Maske ab einem Teil des Randes beginnen zu lassen, anstatt im Inneren davon.

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 zeigt ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten Maskenrand-Präfix-Eigenschaften), sodass Sie eine Vorstellung vom Effekt bekommen können.

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask-border-outset

Browser-Kompatibilität

Siehe auch