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 CSS-Eigenschaft border-image-repeat definiert, wie die Kantenbereiche und der Mittelbereich eines Quellbilds angepasst werden, um die Dimensionen eines Elements als Border-Image zu erfüllen. Der Mittelbereich kann angezeigt werden, indem das Schlüsselwort "fill" in der border-image-slice-Eigenschaft verwendet wird.

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: #000;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

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 angegeben werden.

  • Wird ein Wert angegeben, so gilt dasselbe Verhalten für alle vier Seiten.
  • Werden zwei Werte angegeben, so 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 die Lücke zwischen jeder Grenze zu füllen.

repeat

Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Kacheln können zugeschnitten werden, um die richtige Passform zu erreichen.

round

Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.

space

Die Kantenbereiche des Quellbilds werden gekachelt (wiederholt), um die Lücke zwischen jeder Grenze zu füllen. Der zusätzliche Raum 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 Border-Images

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

Siehe auch