border-image-repeat
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.
Die border-image-repeat
CSS Eigenschaft definiert, wie die Randbereiche und der mittlere Bereich eines Quellbildes angepasst werden, um den Abmessungen des Randbildes eines Elements zu entsprechen. Der mittlere Bereich kann angezeigt werden, indem das Schlüsselwort "fill" in der border-image-slice-Eigenschaft verwendet wird.
Probieren Sie es aus
Syntax
/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* top and bottom | left and right */
border-image-repeat: round stretch;
/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;
Die border-image-repeat
Eigenschaft kann mit einem oder zwei Werten aus der untenstehenden 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, Mitte und unten, der zweite für links und rechts.
Werte
stretch
-
Die Randbereiche des Quellbildes werden gestreckt, um den Abstand zwischen jedem Rand auszufüllen.
repeat
-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand auszufüllen. Kacheln können abgeschnitten werden, um die richtige Passform zu erreichen.
round
-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand auszufüllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.
space
-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand auszufüllen. Extra Platz wird zwischen den Kacheln verteilt, um die richtige Passform zu erreichen.
Formale Definition
Initialer Wert | stretch |
---|---|
Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Wiederholende Randbilder
CSS
#bordered {
width: 12rem;
margin-bottom: 1rem;
padding: 1rem;
border: 40px solid;
border-image: url("border.png") 27;
border-image-repeat: stretch; /* Can be changed in the live sample */
}
Ergebnisse
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat |
Browser-Kompatibilität
BCD tables only load in the browser