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

BCD tables only load in the browser

Siehe auch