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 den Abstand an, um den der Maskenrand eines Elements von seinem Randkasten 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 Eigenschaft mask-border-outset kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist eine <length> oder eine <number>. Negative Werte sind ungültig.

  • Wenn ein Wert angegeben wird, gilt derselbe 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 in folgender Reihenfolge für oben, rechts, unten und links (im Uhrzeigersinn).

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, wird sie dazu dienen, die Maske vom inneren Rand des Randkastens des Elements weg zu bewegen — Sie können sie verwenden, um die Maske so zu positionieren, dass sie teilweise über den Rand hinaus beginnt, anstatt innerhalb 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 enthält ein funktionierendes Beispiel (unter Verwendung der veralteten, mit Präfix versehenen Randmaskeneigenschaften in Chromium), sodass Sie eine Vorstellung vom Effekt erhalten können.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border-outset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Siehe auch