`border-image-repeat` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft border-image-repeat definiert, wie die Bilder für die Seiten und den mittleren Teil des Rahmenbilds skaliert und gekachelt werden. Der mittlere Bereich kann durch Verwendung des Schlüsselworts „fill“ in der Eigenschaft border-image-slice angezeigt werden.

Probieren Sie es aus

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

css

/* Keyword values */
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 Eigenschaft border-image-repeat kann mit einem oder zwei Werten aus der folgenden Werteliste angegeben werden.

Wenn ein Wert angegeben wird, wendet er dasselbe Verhalten auf alle vier Seiten an.
Wenn zwei Werte angegeben werden, gilt der erste für oben, Mitte und unten, der zweite für links und rechts.

Werte

stretch: Die Kantenbereiche des Quellbilds werden gestreckt, um den Abstand zwischen den einzelnen Rändern auszufüllen.
repeat: Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Kacheln können zugeschnitten werden, um eine passende Anpassung zu erreichen.
round: Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Kacheln können gestreckt werden, um eine passende Anpassung zu erreichen.
space: Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Zusätzlicher Platz wird zwischen den Kacheln verteilt, um eine passende Anpassung zu erreichen.

Formale Definition

Anfangswert	`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

Wiederholte 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

Spezifikation
CSS Backgrounds and Borders Module Level 3 # border-image-repeat

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

border-image-repeat CSS property

CSS

Ergebnisse

Help improve MDN

`border-image-repeat` CSS property