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

Anfangswertstretch
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border-repeat

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Siehe auch