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 gibt an, wie die Bilder für die Seiten und den Mittelteil des Maskenrahmenbildes 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 ist, gilt er für alle vier Seiten.
- Wenn zwei Werte angegeben sind, gilt der erste für oben und unten, der zweite für links und rechts.
Werte
stretch-
Die Randbereiche des Quellbilds werden gestreckt, um den Abstand zwischen den einzelnen Rändern zu füllen.
repeat-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern zu füllen. Kacheln können beschnitten werden, um die richtige Passform zu erreichen.
round-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern zu füllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.
space-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern zu füllen. Überschüssiger 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
Beispiele
Grundlegende Verwendung
Diese Eigenschaft scheint derzeit nirgendwo unterstützt zu werden. Sobald sie jedoch unterstützt wird, wird sie dazu dienen zu definieren, wie der Rahmen-Maskenschnitt um den Rahmen herum wiederholt wird — d.h. ob er einfach wiederholt wird oder leicht skaliert wird, sodass eine ganze Zahl von Schnitten passt, oder gestreckt wird, sodass ein Schnitt passt.
mask-border-repeat: round;
Chromium-basierte Browser 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 enthält ein funktionierendes Beispiel (das veraltete, mit Präfix versehene Rahmenmaskeigenschaften verwendet, die in Chromium unterstützt werden), um Ihnen eine Vorstellung vom Effekt zu geben.
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-repeat |