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 festgelegt werden, die aus der unten stehenden Liste von Werten ausgewählt werden.

Wenn ein Wert angegeben wird, gilt dieselbe 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 <length> oder <percentage>. Prozentsätze beziehen sich auf die Breite des Randbereichs für horizontale Versätze und die Höhe des Randbereichs für vertikale Versätze. Darf nicht negativ sein.
<number>: Die Breite des Maskenrandes, angegeben als Vielfaches der entsprechenden border-width. Darf nicht negativ sein.
auto: Die Breite des Maskenrandes ist gleich der intrinsischen Breite oder Höhe (je nachdem, was zutrifft) des entsprechenden mask-border-slice. Wenn das Bild nicht über die erforderliche intrinsische Dimension verfügt, wird stattdessen die entsprechende border-width verwendet.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Prozentwerte	relative to width/height of the mask border image area
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	diskret

Formale Syntax

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

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

Beispiele

Grundlegende Verwendung

mask-border-width definiert die Breite des Maskenrands — das Festlegen auf einen anderen Wert als mask-border-slice führt dazu, dass die Schnitte skaliert werden, um in den Maskenrand zu passen.

css

/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;

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

css

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

Hinweis: Die mask-border Seite enthält ein funktionierendes Beispiel (unter Verwendung der veralteten vorangestellten Maskenrand-Eigenschaften, die in Chromium unterstützt werden), damit Sie eine Vorstellung vom Effekt bekommen.

Spezifikationen

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