border-image-repeat

Übersicht

Die border-image-repeat CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.

Syntax

/* border-image-repeat: Typ */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertikal */
border-image-repeat: round stretch;

/* Globale Werte */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Werte

type

Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.

horizontal

Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.

vertical

Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.

stretch

Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.

repeat

Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.

round

Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.

inherit

Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.

Formale Syntax

[ stretch | repeat | round | space ]{1,2}

Beispiele

Siehe border-image für Beispiele, welche Auswirkungen Wiederholungswerte haben.

Spezifikationen

Browser Kompatibilität