mask-border-repeat

Limited availability

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

Die CSS-Eigenschaft mask-border-repeat CSS legt fest, wie die Bilder für die Seiten und den Mittelteil des Maskengrenzbildes skaliert und gekachelt werden.

Syntax

css

/* Keyword value */
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/* top and bottom | left and right */
mask-border-repeat: round stretch;

/* Global values */
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: revert;
mask-border-repeat: revert-layer;
mask-border-repeat: unset;

Die Eigenschaft mask-border-repeat kann mit einem oder zwei Werten aus der untenstehenden Liste angegeben werden.

Wenn ein Wert angegeben wird, gilt das gleiche Verhalten für alle vier Seiten.
Wenn zwei Werte angegeben werden, gilt der erste für oben und unten, der zweite für links und rechts.

Werte

stretch: Die Randbereiche des Quellbildes werden gestreckt, um die Lücke zwischen jeder Grenze zu füllen.
repeat: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Kacheln können zugeschnitten werden, um die richtige Passform zu erreichen.
round: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Kacheln können gedehnt werden, um die richtige Passform zu erreichen.
space: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Zusätzlicher Platz wird zwischen den Kacheln verteilt, um die richtige Passform zu erreichen.

Formale Definition

Anfangswert	`stretch`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

mask-border-repeat = 
  [ stretch | repeat | round | space ]{1,2}

Diese Eigenschaft scheint derzeit nirgends unterstützt zu werden. Wenn sie schließlich unterstützt wird, wird sie dazu dienen, zu definieren, wie der Maskengrenzschnitt sich um die Grenze wiederholt — d.h. ob er nur wiederholt, leicht skaliert, damit eine ganze Anzahl von Schnitten passt, oder gedehnt wird, sodass ein Schnitt passt.

css

mask-border-repeat: round;

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

css

-webkit-mask-box-image-repeat: round;

Hinweis: Die Seite mask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten, mit Präfix versehenen Maskengrenzeigenschaften), sodass Sie eine Vorstellung von dem Effekt bekommen können.