CSS
HTML
COMPONENTS
CODE HUB
CSS Border Image Generator
Konfiguration
Bild-URL
Versatz
Wiederholen
Bereich
Breite
Klasse
Vorschau
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS Randbild-Generator
In CSS wird die border-image-Eigenschaft verwendet, um ein Bild als Rand eines HTML-Elements zu verwenden, anstatt traditionelle Rand-Eigenschaften wie border-width, border-style und border-color zu nutzen. Diese Eigenschaft ist Teil des CSS Border Image Moduls.
Die border-image-Eigenschaft akzeptiert eine Bild-URL und optionale Werte für das Zuschneiden des Randes, Randbreiten und andere Eigenschaften. Hier ist die grundlegende Syntax:
border-image: source slice width outset repeat;
- source: Gibt die URL oder Referenz des Bildes an, das als Rand verwendet wird.
- slice: Definiert, wie das Bild in neun Bereiche geschnitten wird, ähnlich einem Tic-Tac-Toe-Raster. Diese Eigenschaft bestimmt, welcher Teil des Bildes für jedes Randsegment verwendet wird.
- width: Legt die Breite der Randsegmente fest (wie border-width).
- outset: Steuert, wie die Randsegmente außerhalb der Box des Elements gezeichnet werden.
- repeat: Bestimmt, wie das Bild gekachelt oder wiederholt wird, um den Randbereich zu füllen.
Hier ist ein vereinfachtes Beispiel mit der border-image-Eigenschaft:
.border-image-element {
border-image: url('border-image.png') 27 round;
border-width: 10px;
}
In diesem Beispiel:
- Die Klasse .border-image-element wendet ein Randbild auf das Element an.
- url('border-image.png') gibt das Bild an, das als Rand verwendet wird.
- 27 definiert das Zuschneiden des Randbildes in neun Bereiche.
- round gibt an, dass die Randsegmente wiederholt werden sollen, um den Randbereich zu füllen.
- border-width: 10px legt die Breite der Randsegmente fest.
Die border-image-Eigenschaft ermöglicht kreative und dekorative Randdesigns mit Bildern. Sie wird häufig verwendet, um visuell ansprechende und einzigartige Elemente auf einer Webseite zu erstellen.