border-image

border-image ist eine Kurzschreibweise, die es ermöglicht, ein Bild oder einen CSS-Farbverlauf als Rand eines Elements zu verwenden.

Die Eigenschaft border-image kann auf jedes Element angewendet werden, außer auf interne Tabellenelemente (z. B. tr, th, td), wenn border-collapse auf collapse gesetzt ist.

.element {
  border-image: url(border.png) 25 25 round;
}

Syntax

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Eigenschaften

Die einzig erforderliche Eigenschaft für die Kurzschreibweise border-image ist border-image-source. Die anderen Eigenschaften nehmen ihre Anfangswerte an, wenn sie nicht angegeben werden. Dies sind die border-image Eigenschaften in Reihenfolge

border-image-source

.element {
  border-image-source: url(border.png);
}

Diese Eigenschaft gibt die Quelle für das Randbild an. Dies kann eine URL, ein Data-URI, ein CSS-Farbverlauf oder ein Inline-SVG sein (die Unterstützung für Inline-SVG ist jedoch begrenzt, siehe SVG-Nutzungshinweise).

Der Anfangswert ist none.

border-image-slice

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
}

Die Werte dieser Eigenschaft teilen dem Browser mit, wo das Bild „geschnitten“ werden soll, um die Randstücke zu erzeugen. Das Bild wird in 9 Abschnitte unterteilt – die vier Ecken, die vier Seiten und die Mitte.

Die Eigenschaft akzeptiert bis zu vier positive, einheitenlose Zahlen oder Prozentangaben und optional das Schlüsselwort fill. Der Anfangswert ist 100%.

Einheitenlose Zahlen messen den Schnitt nach Pixeln in einem Rasterbild und nach Koordinaten in einem SVG. Ein Prozentwert bezieht sich auf die Größe des Bildes. Beispielsweise sind bei einem Rasterbild von 100 x 100 Pixeln 10 % von jeder Seite des Bildes 10 Pixel. Weitere Informationen zur Funktionsweise von Prozentwerten in SVG-Bildern finden Sie in den Nutzungshinweisen zu SVG.

Die Werte werden von den oberen, rechten, unteren und linken Rändern des Bildes gemessen (in dieser Reihenfolge). Wenn ein Wert fehlt, wird er vom Wert seiner gegenüberliegenden Seite übernommen – wenn beispielsweise der linke Wert fehlt, der rechte Wert aber auf 10 Pixel gesetzt ist, wird der linke Wert ebenfalls 10 Pixel betragen.

Standardmäßig wird die Mitte des Quellbilds verworfen. Wenn jedoch das Schlüsselwort fill verwendet wird, wird es stattdessen auf den Hintergrund des umrandeten Elements angewendet.

border-image-width

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
}

Diese Eigenschaft legt die Breite des Randbilds fest. Sie akzeptiert einen Prozentwert, eine positive einheitenlose Zahl oder das Schlüsselwort auto.

Die Werte gelten für die oberen, rechten, unteren und linken Seiten des Elements (in dieser Reihenfolge). Wenn ein Wert fehlt, wird er genauso gezeichnet wie sein gegenüberliegender Wert.

Bei dieser Eigenschaft beziehen sich Prozentwerte auf die Größe des Randbildbereichs, während eine einheitenlose Zahl mit der border-width multipliziert wird.

Der Anfangswert ist 1. Wenn dieser Wert nicht gesetzt ist, aber eine border- oder border-width-Deklaration für das Element vorhanden ist, wird das Randbild mit dieser Breite gezeichnet.

Das Schlüsselwort auto weist den Browser an, entweder die Größe von border-image-slice, falls verfügbar, oder die Größe von border-width zu verwenden.

border-image-outset

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
}

Der Wert dieser Eigenschaft gibt an, wie weit der Randbildbereich über den Randkasten hinausragt. Der Anfangswert ist 0. Die Eigenschaft akzeptiert bis zu vier positive Längenwerte oder einheitenlose Zahlen. Längenwerte sind absolute Maße, während eine einheitenlose Zahl mit der Randbreite multipliziert wird, um den Outset-Wert zu berechnen, ähnlich wie einheitenlose Zahlen für border-image-width funktionieren.

border-image-repeat

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: round;
}

Diese Eigenschaft steuert, wie das Bild wiederholt wird, um den Bereich des Randes zu füllen.

Sie können bis zu zwei Werte für diese Eigenschaft angeben. Wenn ein Wert angegeben ist, wird er sowohl auf die horizontalen als auch auf die vertikalen Seiten des Randes angewendet. Wenn zwei Werte angegeben sind, wird der erste auf die horizontalen Seiten und der zweite auf die vertikalen Seiten angewendet.

Werte

• stretch: der Anfangswert. Das Randbild wird gestreckt, um den Bereich zu füllen.
• repeat: das Bild wird gekachelt, um den Bereich zu füllen, wobei Kacheln bei Bedarf geteilt werden.
• round: das Bild wird gekachelt, um den Bereich zu füllen, und bei Bedarf skaliert, um das Teilen von Kacheln zu vermeiden.
• space: das Bild wird gekachelt, um den Bereich zu füllen. Wenn der Bereich nicht mit ganzen Kacheln gefüllt werden kann, wird zwischen den Kacheln Platz für eine gleichmäßige Passform eingefügt. Hinweis: Dieser Wert wird noch von keinem Browser implementiert.

Probieren Sie die verschiedenen Werte für border-image-repeat in dieser Demo aus (space ist nur für zukünftige Kompatibilität enthalten; es funktioniert noch nicht wie spezifiziert in irgendeinem Browser).

Farbverlauf-Randbilder

Alle Browser, die border-image unterstützen, unterstützen auch CSS-Farbverläufe. Sie können Farbverläufe jeder Art verwenden, um Ihren Rand zu gestalten. Diese Demo zeigt einen wiederholenden linearen Farbverlauf, der einen gestreiften Rand erzeugt (fahren Sie mit der Maus darüber, um die Streifenfarben wechseln zu sehen).

Der Browser schneidet den Farbverlauf so, als würde er ein quadratisches Bild mit einer Breite und Höhe schneiden, die der border-image-width entsprechen.

SVG-Randbilder

Der größte Unterschied zwischen der Verwendung von Rasterbildern und SVG für border-image liegt in der Art und Weise, wie die Schnitte gemessen werden.

Einheitenlose Werte stellen Koordinaten in SVG-Bildern dar.

Prozentwerte beziehen sich auf die Größe des Bildes.

Wenn das SVG keine definierte Größe hat, wird es mit dem Standardgrößenalgorithmus dimensioniert, der den durch border-image-outset definierten Randbildbereich als Standardgröße verwendet. Dies kann in der Praxis verwirrend sein, daher ist es hilfreich, dem SVG nach Möglichkeit eine Größe zuzuweisen.

SVG in einer Bildquell-URL

Sie können eine SVG-Datei als border-image-source verknüpfen, genauso wie Sie ein Rasterbild verknüpfen würden

.element {
  border-image-source: url(border.svg);
}

Dies ist wahrscheinlich die beste Methode, um SVG als Randbilder zu verwenden. Es ist gut unterstützt – alle modernen Browser, die border-image unterstützen, akzeptieren ein verknüpftes SVG als border-image-source.

Inline

Sie können ein SVG-Randbild Base64-kodieren oder die SVG-Markup direkt in die Randbildquelle schreiben, aber beide Methoden haben erhebliche Probleme.

Base64-SVG hat genug Probleme, dass es einen eigenen Artikel verdient: Wahrscheinlich kein Base64 SVG.

Das Schreiben von SVG-Bild-Markup direkt in eine border-image-Deklaration hat ebenfalls Komplikationen; Internet Explorer erkennt es nicht, und die Unterstützung in Firefox ist eigenartig (siehe Bug 619500).

Das Randbild in dieser Demo ist ein Inline-SVG-Farbverlauf. Wenn Sie sich den „CSS“-Tab ansehen, werden Sie feststellen, dass die Markup sorgfältig zusammengestellt werden muss – beachten Sie die doppelten Anführungszeichen um das Markup, die einfachen Anführungszeichen innerhalb des Markups und die escapeten Oktal-Hash-Zeichen (#) in den Hex-Farben.

Einzelnes wiederholendes Randbild

Ein Element mit einem einzelnen wiederholenden Bild zu umranden, ist etwas, das mit einer Eigenschaft namens border-image einfach erscheinen sollte, aber der Prozess, dies tatsächlich zu tun, ist eher kontraintuitiv.

Nehmen wir zum Beispiel an, Sie möchten ein Element mit einem sich wiederholenden Herzsymbol umranden. Das können Sie nicht mit einem Bild eines einzelnen Herzens tun. Stattdessen müssen Sie ein Bild eines „Rahmens“ von Herzen erstellen, die so angeordnet sind, wie Sie sie im Rand erscheinen lassen möchten, und dieses Bild dann zuschneiden.

Wenn Sie denken, das klingt absurd, sind Sie in guter Gesellschaft. Vor einigen Jahren gab es eine ausführliche Diskussion zu diesem Thema auf Eric Myers Blog, an der viele Frontend-Entwicklungsgrößen teilnahmen.

In dieser Demo wiederholt sich ein Herz um den Rand des Div. Das Bild border-image-source ist ein zusammengesetztes Bild von acht identischen Herzsymbolen, das so zugeschnitten ist, dass die vollständige Herzform auf jeder Seite des Elements verwendet wird.

Zusätzliche Hinweise

Obwohl sich die Unterstützung für border-image verbessert hat – sie wird in allen aktuellen Browserversionen ohne Präfix unterstützt –, ist es immer noch ratsam, einen Fallback-border-Stil festzulegen. Ihr Fallback-Rand wird in Browsern angezeigt, die border-image nicht unterstützen oder wenn das Bild nicht geladen werden kann.

Im Gegensatz zu einigen anderen Rand-Eigenschaften kann border-image nicht animiert werden. Es kann auch nicht mit border-radius gestylt werden.

Wenn Sie eine border-image-source und eine border-Breite oder border-image-width ohne Schnitte deklarieren, wird das gesamte ungeschnittene Bild in den vier Ecken des Elements platziert, skaliert auf Ihre angegebene Breite.

Demos

• Ebenfalls von Dudley Storey, Praktisches Border-Image: responsiver Bilderrahmen, eine CodePen-Demo. Dies ist ein gutes Beispiel für die sinnvolle Verwendung eines Randbilds bei einem responsiven Bild. Beachten Sie, dass der „Rahmen“ bei kleineren Bildschirmgrößen entfernt wird.
• Echte gepunktete Ränder mit SVG und Border-Image, ein Pen von Lucas Lemonnier. Eine Lösung für den hässlichen quadratischen „gepunkteten“ Rand, diese Methode liefert Ihnen echte runde Punkte!
• gradient button, ein Pen des CodePen-Benutzers GSSxGSS. Ein schönes Beispiel für einen linearen Farbverlauf als Randbild.
• Film Strip, ein Pen von Nick Pettit. Vielleicht nicht die praktischste Demo, dies ist ein unterhaltsames, künstlerisches Beispiel dafür, was Sie mit border-image machen können.

Weitere Informationen

• CSS Background and Borders Module Level 3 (Candidate Recommendation)
• border-image.com: Dieses Werkzeug ermöglicht es Ihnen, ein Bild hochzuladen und mit den Rand-Slices zu spielen, bis Sie sie richtig haben, dann generiert es das CSS für Sie.
• Border Image Explained (Dudley Storey)

Browser-Unterstützung

Verwandt