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 setzt 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 Werteliste ausgewählt werden.

Wenn ein Wert angegeben ist, gilt er für alle vier Seiten.
Wenn zwei Werte angegeben sind, gilt der erste Wert für oben und unten, der zweite für links und rechts.
Wenn drei Werte angegeben sind, gilt der erste Wert für oben, der zweite für links und rechts, der dritte für unten.
Wenn vier Werte angegeben sind, gelten die Breiten der Reihe nach für oben, rechts, unten und links (im Uhrzeigersinn).

Werte

<length-percentage>: Die Breite des Maskenrandes, angegeben als ein <length> oder ein <percentage>. Prozentwerte beziehen sich auf die Breite des Randbereichs bei horizontalen Versätzen und auf die Höhe des Randbereichs bei vertikalen Versätzen. 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 entspricht der intrinsischen Breite oder Höhe (je nachdem, was zutrifft) des entsprechenden mask-border-slice. Wenn das Bild nicht die erforderliche intrinsische Dimension hat, 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 der Maskenumrandung — wenn dieser Wert anders als mask-border-slice festgelegt wird, werden die Slices skaliert, um in die Maskenumrandung zu passen.

css

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

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 bietet ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten Maskenumrandungs-Eigenschaften mit Präfix), um einen Eindruck von der Wirkung zu bekommen.

Spezifikationen

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