Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
mask-border-repeat
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Diemask-border-repeatCSS-Eigenschaft gibt an, wie die Bilder für die Seiten und den mittleren Teil desMaskenrandbildes 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;Diemask-border-repeat-Eigenschaft kann mit einem oder zwei Werten aus der untenstehenden Liste angegeben werden.
- Wennein Wert angegeben wird, gilt dasselbe Verhalten füralle vier Seiten.
- Wennzwei Werte angegeben werden, bezieht sich der erste aufoben und unten, der zweite auflinks und rechts.
Werte
stretchDie Randbereiche des Quellbildes werden gedehnt, um die Lücke zwischen den Rändern zu füllen.
repeatDie Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen den Rändern zu füllen. Kacheln können abgeschnitten werden, um die richtige Passform zu erzielen.
roundDie Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen den Rändern zu füllen. Kacheln können gedehnt werden, um die richtige Passform zu erzielen.
spaceDie Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen den Rändern zu füllen. Zusatzraum wird zwischen den Kacheln verteilt, um die richtige Passform zu erzielen.
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 =
[stretch|repeat|round|space]{1,2}
Beispiele
Grundlegende Nutzung
Diese Eigenschaft scheint derzeit noch nirgends unterstützt zu werden. Sobald sie unterstützt wird, dient sie dazu, zu definieren, wie der Maskenrand-Schnitt sich um den Rand wiederholt — z.B., ob er sich einfach wiederholt oder leicht skaliert wird, damit eine ganze Anzahl von Schnitten passt, oder ob ein Schnitt gedehnt wird, damit er 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 Seitemask-border enthält ein funktionierendes Beispiel (unter Verwendung der veralteten, in Chromium unterstützten Präfix-Eigenschaften des Maskenrandes), damit Sie sich eine Vorstellung von der Wirkung machen können.
Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-repeat |