Border-image-repeat | CSS-Tricks

CSS Almanac → Eigenschaften → B → border-image-repeat

Sunkanmi Fafowora on 20. Dez 2022

Die CSS-Eigenschaft border-image-repeat steuert, wie ein Rahmenbild wiederholt wird, um die äußeren Ränder eines Elements zu füllen. Sie kann auch das Zentrum des Hintergrunds eines Elements steuern, wenn border-image-slice auf fill gesetzt ist.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-repeat: repeat;
}

Die Eigenschaft border-image-repeat ist in der Spezifikation des CSS Backgrounds and Borders Module Level 3 definiert.

Syntax

border-image-repeat: stretch | repeat | round | space

Anfangswert: stretch
Gilt für: alle Elemente (einschließlich des Pseudo-Elements ::first-letter), außer interne Tabellenelemente, wenn border-collapse auf collapse gesetzt ist.
Vererbt: nein
Prozentwerte: n/v
Berechneter Wert: zwei Schlüsselwörter, eines pro Achse
Animationstyp: diskret

Werte

/* Keyword values */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* Multiple value syntax */
border-image-repeat: stretch repeat;
border-image-repeat: stretch round;
border-image-repeat: stretch space;

border-image-repeat: round stretch;
border-image-repeat: round repeat;
border-image-repeat: round space;

border-image-repeat: repeat stretch;
border-image-repeat: repeat round;
border-image-repeat: repeat space;

border-image-repeat: space stretch;
border-image-repeat: space round;
border-image-repeat: space repeat;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;

`stretch`

Dies ist der Standardwert. Er dehnt das Bild, um den Randbereich auszufüllen.

`repeat`

Dieser Wert wiederholt das Rahmenbild in Kacheln, um den Rahmenbereich zu füllen. Wenn die Kachelung einen Punkt erreicht, an dem kein Platz mehr für eine vollständige Kachel vorhanden ist, kann diese Kachel beschnitten werden, um den verbleibenden Platz ordnungsgemäß zu füllen und Lücken zu vermeiden.

`round`

Ähnlich wie repeat wiederholt dieser Wert das Bild und dehnt es, um alle Ränder zu füllen. Aber im Gegensatz zu repeat passt der Wert round das Bild an, um Lücken zu vermeiden, anstatt Kacheln zu beschneiden.

`space`

Wie die anderen Werte wiederholt space das Rahmenbild in Kacheln, um den Rahmenbereich zu füllen. Wenn ein Restplatz vorhanden ist, verteilt space diesen um die Kacheln herum, um den gesamten Bereich zu füllen, anstatt Kacheln zu beschneiden und zu dehnen oder das Bild neu zu skalieren.

Einige Hintergründe

Wir können ein Bild festlegen, das als Rahmen eines Elements verwendet wird

.element {
  border-image-source: url("/path/to/image.webp");
}

Das wird nichts nützen, da wir die Breite und den Stil des Rahmens noch nicht festgelegt haben. Machen wir das also

.element {
  border: 2.5rem solid; /* shorthand for `border-width` and `border-style` */
  border-image-source: url("/path/to/image.webp");
}

Wir müssen border-color nicht festlegen, aber es könnte eine gute Idee sein, als Fallback, falls die Rahmenbilddatei aus irgendeinem Grund nicht geladen werden kann.

Dies zeichnet unseren Rahmen mit der von uns angegebenen Bilddatei (hier ist die Datei, die wir in den Beispielen verwenden)

Wir haben Bilder für alle Richtungen des Rahmens generiert. Das Problem ist, dass wir keine Anweisungen gegeben haben, was mit diesem Bild geschehen soll, um den verfügbaren Platz auszufüllen. Aber zuerst können wir das Bild mit border-image-slice "schneiden". Das teilt es in neun Abschnitte – die vier Ecken, die vier Seiten und die Mitte.

The borders of the top, left, right, bottom, and middle parts of an element.

Sobald das Rahmenbild aufgeteilt ist, werden die Kacheln positioniert und border-image-repeat: stretch (der Standardwert) übernimmt, um das gesamte Bild zu dehnen und den gesamten verfügbaren Platz auszufüllen, den wir für den Rahmen gezeichnet haben.

Jetzt können wir border-image-repeat explizit deklarieren und es mit einem der von uns behandelten Werte festlegen.

Rahmenbilder mit zwei Repeat-Werten zeichnen

Daher kann border-image-repeat bis zu zwei Werte annehmen. Wenn wir mit der Zwei-Werte-Syntax arbeiten, legt das erste Schlüsselwort die Skalierung und Kachelung in horizontaler Richtung (die obere und untere Kante des Rahmens) fest. Es kann auch die mittlere Region festlegen, wenn border-image-slice auf fill gesetzt ist.

The borders of the top, bottom, and middle parts of an element.

Das zweite Schlüsselwort in der Zwei-Werte-Syntax legt die Skalierung und Kachelung in vertikaler Richtung (die linke und rechte Kante des Rahmens) sowie das mittlere Bild fest, wenn border-image-slice auf fill gesetzt ist.

The borders of the left, right, and middle parts of an element.

Die offizielle Spezifikation beschreibt den Prozess, der beim Wiederholen eines Rahmenbildes mit der Zwei-Werte-Syntax stattfindet, bemerkenswert gut. Wir fügen ihn hier wörtlich ein: Hier geht's zur Beschreibung.

Wenn das erste Schlüsselwort stretch lautet, werden die oberen, mittleren und unteren Bilder weiter skaliert, um so breit wie der mittlere Teil des Rahmenbildbereichs zu sein. Die Höhe wird nicht weiter geändert.
Wenn das erste Schlüsselwort round lautet, werden die oberen, mittleren und unteren Bilder in der Breite neu skaliert, sodass genau eine ganze Anzahl von ihnen in den mittleren Teil des border-image-Bereichs passt, genau wie bei round in der background-repeat-Eigenschaft.
Wenn das erste Schlüsselwort repeat oder space lautet, werden die oberen, mittleren und unteren Bilder nicht weiter geändert.