CSS border-image Eigenschaft
Die CSS-Kurzschreibweise border-image ermöglicht die Verwendung eines Bildes als Rahmen um ein Element. Beispiele und Live-Demo.
Die Kurzschreibweise border-image ermöglicht es, ein Bild — oder einen CSS-Farbverlauf — als Rahmen eines Elements zu verwenden, anstelle einer einfachen durchgezogenen Linie. Sie gehört zu den CSS3-Eigenschaften.
Diese Seite erklärt, wie die Eigenschaft funktioniert (das Neun-Segment-Modell dahinter), die Syntax der Kurzschreibweise, mehrere ausführbare Beispiele und wann der Einsatz von border-image sinnvoll ist.
Wie border-image funktioniert: das Neun-Segment-Modell
Der Trick hinter border-image ist das Neun-Segment-Schneiden (Nine-Slicing). Der Browser nimmt das Quellbild und schneidet es mit vier Linien — zwei horizontalen, zwei vertikalen — in neun Bereiche:
- 4 Ecken werden in den vier Ecken des Elements platziert und werden nie gestreckt oder wiederholt.
- 4 Kanten (oben, rechts, unten, links) füllen den Raum zwischen den Ecken. Diese werden gestreckt, wiederholt, abgerundet oder mit Abstand verteilt, abhängig von border-image-repeat.
- 1 Mitte wird standardmäßig verworfen, sodass der Hintergrund des Elements durchscheint. Fügen Sie das Schlüsselwort
fillzu border-image-slice hinzu, um sie beizubehalten.
Die Position dieser Schnittlinien wird durch border-image-slice gesteuert. Dieses Modell ermöglicht es, dass ein kleines Bild eines dekorativen Rahmens eine Box beliebiger Größe umschließen kann, ohne dass die Ecken verzerrt werden.
Wichtig:
border-imagewird nur gezeichnet, wenn das Element tatsächlich einen Rahmen hat. Sie müssen dem Element einenborder-style(oder die Kurzschreibweise border) ungleichnonezuweisen — zum Beispielborder: 10px solid transparent;— sonst wird nichts angezeigt.
Die Kurzschreibweise und ihre Untereigenschaften
Diese Kurzschreibweise kombiniert mehrere einzelne border-image-Eigenschaften. Ausgelassene Werte werden auf ihre Anfangswerte zurückgesetzt. Hinweise zu jeder Untereigenschaft finden Sie unten:
- border-image-source - Wenn der Wert "none" ist oder das Bild nicht angezeigt werden kann, werden die Rahmenstile verwendet.
- border-image-slice - Der mittlere Teil des Bildes wird als vollständig transparent behandelt, sofern der Wert "fill" nicht gesetzt ist.
- border-image-width - Wenn der Wert dieser Eigenschaft größer als die border-width des Elements ist, wird das Rahmenbild über den padding- (und/oder content-) Rand hinaus erweitert. Beachten Sie außerdem, dass diese Eigenschaft mit einem, zwei, drei oder vier Werten angegeben werden kann.
- border-image-outset - Sie kann ebenfalls mit einem, zwei, drei oder vier Werten angegeben werden.
- border-image-repeat - Sie kann durch zwei Werte angegeben werden. Wird der zweite Wert weggelassen, wird er als identisch mit dem ersten angenommen. Wenn nur ein Wert gesetzt wird, gilt das gleiche Verhalten für alle vier Seiten; werden zwei Werte gesetzt, gilt der erste für oben und unten, der zweite für links und rechts.
| Eigenschaft | Wert |
|---|---|
| Anfangswert | none 100% 1 0 stretch |
| Gilt für | Alle Elemente, außer interne Tabellenelemente, wenn border-collapse auf "collapse" gesetzt ist. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Nein |
| Version | CSS3 |
| DOM Syntax | object.style.borderImage = "url(border.png) 30 round" |
Syntax
Syntax der CSS border-image Eigenschaft
border-image: source slice width outset repeat | initial | inherit;Beispiel der border-image Eigenschaft:
Beispiel der CSS border-image Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 10%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">border-image: 10% round;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Ergebnis
Beispiel der border-image Eigenschaft mit mehreren Werten:
Beispiel der CSS border-image Eigenschaft mit verschiedenen Werten
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 30%;
border-image-repeat: repeat;
border-image-width: 15px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 20%;
border-image-repeat: round;
border-image-width: 10px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 15%;
border-image-repeat: space;
border-image-width: 20px;
}
</style>
</head>
<body>
<h2>Border-image example with all values.</h2>
<p class="border">border-image: 30% 15px repeat</p>
<p class="border2">border-image: 20% 10px round;</p>
<p class="border3">border-image: 15% 20px space;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Verwendung eines CSS-Farbverlaufs als Rahmen
border-image-source akzeptiert neben einer URL auch einen Farbverlauf, sodass Sie einen farbigen Rahmen ganz ohne Bilddatei erstellen können. Der Farbverlauf wird genau wie ein Bild behandelt und auf dieselbe Weise geschnitten.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.gradient-border {
border: 12px solid transparent;
padding: 15px;
border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
}
</style>
</head>
<body>
<p class="gradient-border">A border drawn from a CSS gradient.</p>
</body>
</html>Die 1 nach dem Farbverlauf ist der border-image-slice-Wert. Da ein Farbverlauf keine realen Ränder hat, die geschützt werden müssen, ordnet das Schneiden bei 1 die vier Kanten und Ecken ohne Verzerrung dem Rahmen zu.
Wann border-image verwenden
Greifen Sie auf border-image zurück, wenn eine einfache Volltonfarbe nicht ausreicht:
- Dekorative oder thematische Rahmen — kunstvolle, handgezeichnete oder Rissen-Papier-Rahmen, die mit
border-stylenicht möglich wären. - Farbverlauf-Rahmen — siehe das obige Beispiel; viel einfacher als die Nachahmung mit einem Wrapper-Element und
background-clip. - Sich wiederholende Muster — eine kleine Kachel, die dank des Neun-Segment-Modells Boxen jeder Größe umrahmt.
Für einfache abgerundete Ecken verwenden Sie border-radius; für eine normale farbige Linie verwenden Sie die standardmäßige border-Kurzschreibweise — diese sind schlanker und animierbar, während border-image es nicht ist.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| border-image-source | Gibt das Quellbild an, das zum Erstellen des Rahmenbildes verwendet wird. Dies kann eine URL, ein Data-URI, ein CSS-Farbverlauf oder ein eingebettetes SVG sein. | |
| border-image-slice | Gibt an, wie das durch border-image-source festgelegte Bild geschnitten wird. Das Bild wird immer in neun Abschnitte unterteilt: vier Ecken, vier Kanten und die Mitte. | Ausprobieren » |
| border-image-width | Gibt die Breite des Rahmenbildes an. | |
| border-image-repeat | Gibt an, ob das Rahmenbild wiederholt, abgerundet oder gestreckt wird. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browserunterstützung
border-image wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari und Opera). Da es auf die von Ihnen festgelegten border-style- und border-color-Werte zurückfällt, können Sie es als progressive Verbesserung über einem normalen Rahmen verwenden: Ältere oder nicht unterstützende Browser zeigen den einfachen Rahmen, neuere Browser zeigen das Bild.