mask-border-width

Limited availability

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

Die mask-border-width CSS Eigenschaft legt die Breite des Maskenrandes eines Elements fest.

Syntax

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;

Die mask-border-width Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden, die aus der folgenden Liste ausgewählt werden.

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

Werte

<length-percentage>

Die Breite des Maskenrandes, angegeben als ein <length> oder ein <percentage>. Prozentsätze beziehen sich auf die Breite des Randbereichs für horizontale Versätze und auf die Höhe des Randbereichs für vertikale Versätze. Darf nicht negativ sein.

<number>

Die Breite des Maskenrandes, angegeben als ein Vielfaches der entsprechenden border-width. Darf nicht negativ sein.

auto

Die Breite des Maskenrandes wird der intrinsischen Breite oder Höhe (je nachdem, was anwendbar ist) der entsprechenden mask-border-slice gleichgesetzt. Wenn das Bild nicht die erforderliche intrinsische Dimension hat, wird stattdessen die entsprechende border-width verwendet.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Prozentwerterelative to width/height of the mask border image area
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstypdiskret

Formale Syntax

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

<length-percentage> =
<length> |
<percentage>

Beispiele

Grundlegende Verwendung

Diese Eigenschaft scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, die Breite des Maskenrandes zu definieren — das Setzen eines anderen Wertes als mask-border-slice bewirkt, dass die Schnitte skaliert werden, um in den Maskenrand zu passen.

css
mask-border-width: 30 fill;

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

css
-webkit-mask-box-image-width: 20px;

Hinweis: Die Seite mask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten prefixed Maskenrand-Eigenschaften), sodass Sie eine Vorstellung von der Wirkung bekommen können.

Spezifikationen

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

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-width

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