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.
Want more browser support for this feature? Tell us why.
Die CSS-Eigenschaft mask-border-repeat gibt an, wie die Bilder für die Seiten und den mittleren Teil des Maskenrahmenbilds skaliert und gekachelt werden.
Syntax
/* Keyword values */
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 aufgeführten Werteliste angegeben werden.
- Wenn ein Wert angegeben wird, gilt dasselbe 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 Quellbilds werden gestreckt, um den Abstand zwischen den einzelnen Rahmen auszufüllen.
repeat-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rahmen auszufüllen. Kacheln können beschnitten werden, um die passende Anpassung zu erreichen.
round-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rahmen auszufüllen. Kacheln können gestreckt werden, um die passende Anpassung zu erreichen.
space-
Die Randbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rahmen auszufüllen. Zusätzlicher Platz wird zwischen den Kacheln verteilt, um die passende Anpassung 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 noch nirgends unterstützt zu werden. Wenn sie schließlich unterstützt wird, dient sie dazu festzulegen, wie der Maskenrahmen-Ausschnitt um den Rahmen herum wiederholt wird — also ob er einfach wiederholt, leicht skaliert wird, sodass eine ganze Anzahl von Ausschnitten passt, oder gestreckt wird, sodass ein Ausschnitt 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 zu mask-border enthält ein funktionierendes Beispiel (das die von Chromium unterstützten veralteten präfixierten Maskenrahmen-Eigenschaften verwendet), sodass Sie sich eine Vorstellung vom Effekt machen können.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-border-repeat |