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 Mittelbereich eines Quellbildes angepasst werden, um die Dimensionen des Randbildes eines Elements zu füllen. Der Mittelbereich kann angezeigt werden, indem das Schlüsselwort "fill" in der border-image-slice Eigenschaft verwendet wird.

Probieren Sie es aus

Syntax

css
/* 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 unten stehenden Liste spezifiziert werden.

  • Wenn ein Wert angegeben ist, wird das gleiche Verhalten auf alle vier Seiten angewendet.
  • Wenn zwei Werte angegeben sind, gilt der erste für den oberen, mittleren und unteren Bereich, der zweite für den linken und rechten Bereich.

Werte

stretch

Die Randbereiche des Quellbildes werden gestreckt, um die Lücke zwischen jedem Rand zu füllen.

repeat

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jedem Rand zu füllen. Kacheln können beschnitten werden, um die richtige Passform zu erreichen.

round

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jedem Rand zu füllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.

space

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um die Lücke zwischen jedem Rand zu füllen. Zusätzlicher Platz wird zwischen den Kacheln verteilt, um die richtige Passform zu erreichen.

Formale Definition

Anfangswertstretch
Anwendbar aufAlle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}

Beispiele

Wiederholende Randbilder

CSS

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

Siehe auch