mask-border-repeat CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die mask-border-repeat CSS-Eigenschaft gibt an, wie die Bilder für die Seiten und den mittleren Teil des Maskengrenzbildes skaliert und gekachelt werden.
Syntax
/* 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 unten stehenden 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 gedehnt, um die Lücke zwischen den einzelnen Rändern zu füllen.
repeat-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen den einzelnen Rändern zu füllen. Kacheln können abgeschnitten werden, um die richtige Passform zu erreichen.
round-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen den einzelnen Rändern 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 den einzelnen Rändern zu füllen. Zusätzlicher Raum 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 =
<'border-image-repeat'>
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
Beispiele
Grundlegende Verwendung
Diese Eigenschaft scheint derzeit nirgends unterstützt zu werden. Wenn sie schließlich unterstützt wird, wird sie festlegen, wie die Randmasken-Slice um den Rand wiederholt werden soll — d.h. ob sie einfach wiederholt wird, leicht skaliert wird, damit eine ganze Anzahl von Slices passt, oder gedehnt wird, damit ein Slice passt?
mask-border-repeat: round;
Browser, die auf Chromium basieren, unterstützen eine veraltete Version dieser Eigenschaft — mask-box-image-repeat — mit einem Präfix:
-webkit-mask-box-image-repeat: round;
Hinweis:
Die Seite mask-border bietet ein funktionierendes Beispiel (unter Verwendung der veralteten, mit Präfix versehenen Randmasken-Eigenschaften in Chromium), sodass Sie sich eine Vorstellung vom Effekt machen können.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-border-repeat |