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 Maskenrahmens 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 Eigenschaft mask-border-width kann mit einem, zwei, drei oder vier Werten aus der untenstehenden Liste angegeben werden.

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

Werte

<length-percentage>: Die Breite des Maskenrahmens, angegeben als <length> oder <percentage>. Prozentangaben beziehen sich auf die Breite des Rahmenbereichs für horizontale Offsets und die Höhe des Rahmenbereichs für vertikale Offsets. Darf nicht negativ sein.
<number>: Die Breite des Maskenrahmens, angegeben als Vielfaches der entsprechenden border-width. Darf nicht negativ sein.
auto: Die Breite des Maskenrahmens wird gleich der intrinsischen Breite oder Höhe (je nachdem, was zutrifft) des entsprechenden mask-border-slice gesetzt. 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>

mask-border-width definiert die Breite des Maskenrahmens — wenn dies auf einen anderen Wert als mask-border-slice eingestellt wird, werden die Abschnitte so skaliert, dass sie in den Maskenrahmen passen.

css

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

In auf Chromium basierenden Browsern wird eine veraltete Version dieser Eigenschaft mit einem Präfix unterstützt — mask-box-image-width:

css

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

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