mask-border-repeat

Limited availability

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

Die mask-border-repeat CSS Eigenschaft legt fest, wie die Randregionen eines Ausgangsbildes angepasst werden, um die Dimensionen des Maskenrahmens eines Elements zu entsprechen.

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 Werteliste angegeben werden.

  • Wenn ein Wert angegeben ist, wird dasselbe Verhalten auf allen vier Seiten angewendet.
  • Wenn zwei Werte angegeben sind, wird der erste auf oben und unten angewendet, der zweite auf links und rechts.

Werte

stretch

Die Randregionen des Ausgangsbildes werden gestreckt, um den Abstand zwischen den Rändern auszufüllen.

repeat

Die Randregionen des Ausgangsbildes werden gekachelt (wiederholt), um den Abstand zwischen den Rändern auszufüllen. Kacheln können abgeschnitten werden, um die richtige Passform zu erreichen.

round

Die Randregionen des Ausgangsbildes werden gekachelt (wiederholt), um den Abstand zwischen den Rändern auszufüllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.

space

Die Randregionen des Ausgangsbildes werden gekachelt (wiederholt), um den Abstand zwischen den Rändern auszufüllen. Zusätzlicher Platz wird zwischen den Kacheln verteilt, um die richtige Passform zu erreichen.

Formale Definition

Initialer Wertstretch
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Grundlegende Nutzung

Diese Eigenschaft scheint derzeit nirgends unterstützt zu werden. Wenn sie schließlich unterstützt wird, wird sie dazu dienen, zu definieren, wie der maskierte Rahmen-Slice sich wiederholen wird — d.h., ob er sich einfach wiederholt, leicht skaliert wird, sodass eine ganze Zahl von Slices passt, oder gestreckt wird, sodass ein Slice passt.

css
mask-border-repeat: round;

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

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

Hinweis: Auf der Seite mask-border gibt es ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten maskierten Rand-Eigenschaften mit Präfix), sodass Sie eine Vorstellung von der Wirkung bekommen können.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch