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 March 2016.

Die border-image-repeat CSS Eigenschaft definiert, wie die Bilder für die Seiten und den mittleren Teil des border image skaliert und gekachelt werden. Der mittlere Bereich 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 unter Verwendung eines oder zweier Werte aus der unten stehenden Liste 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 und der zweite für links und rechts.

Werte

stretch

Die Randbereiche des Quellbildes werden gestreckt, um den Abstand zwischen den einzelnen Rändern auszufüllen.

repeat

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Kacheln können zugeschnitten werden, um die richtige Passform zu erreichen.

round

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Kacheln können gestreckt werden, um die richtige Passform zu erreichen.

space

Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den einzelnen Rändern auszufüllen. Zusätzliches Leerzeichen 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 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 */
}

Ergebnisse

Spezifikationen

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

Browser-Kompatibilität

Siehe auch