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 Abmessungen eines Elements mit einem Rahmenbild 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 Werteliste 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 gedehnt, um den Abstand zwischen den jeweiligen Rahmen zu füllen.
repeat: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rahmen zu füllen. Kacheln können beschnitten werden, um die richtige Passform zu erreichen.
round: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rahmen zu füllen. Kacheln können gedehnt werden, um die richtige Passform zu erreichen.
space: Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rahmen zu füllen. Zusätzlicher 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

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

Beispiele

Wiederkehrende Rahmenbilder

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 */
}

<div id="bordered">You can try out various border repetition rules on me!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>

const repetition = document.getElementById("repetition");
repetition.addEventListener("change", (evt) => {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});

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

Hintergründe und Rahmen
CSS lernen: Hintergründe und Rahmen
Rahmenbilder in CSS: Ein Schwerpunktbereich für Interop 2023 im MDN-Blog (2023)