border-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.
Die border-image
-CSS-Eigenschaft zeichnet ein Bild um ein gegebenes Element. Sie ersetzt den regulären border des Elements.
Probieren Sie es aus
Hinweis:
Sie sollten einen separaten border-style
angeben, falls das Rahmenbild nicht geladen werden kann. Obwohl die Spezifikation dies nicht strikt verlangt, rendern einige Browser das Rahmenbild nicht, wenn border-style
auf none
oder border-width
auf 0
gesetzt ist.
Untergeordnete Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* source | slice */
border-image: linear-gradient(red, blue) 27;
/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;
/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;
/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
/* Global values */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;
Die border-image
-Eigenschaft kann mit einer bis zu fünf der unten aufgeführten Werte spezifiziert werden.
Hinweis:
Wenn der berechnete Wert von border-image-source
none
ist oder das Bild nicht angezeigt werden kann, wird der border-style
stattdessen angezeigt.
Werte
<'border-image-source'>
-
Die Quelle des Bildes. Siehe
border-image-source
. <'border-image-slice'>
-
Die Dimensionen für das Zerschneiden der Bildquelle in Bereiche. Bis zu vier Werte können angegeben werden. Siehe
border-image-slice
. <'border-image-width'>
-
Die Breite des Rahmenbildes. Bis zu vier Werte können angegeben werden. Siehe
border-image-width
. <'border-image-outset'>
-
Der Abstand des Rahmenbildes vom äußeren Rand des Elements. Bis zu vier Werte können angegeben werden. Siehe
border-image-outset
. <'border-image-repeat'>
-
Legt fest, wie die Randbereiche des Quellbildes angepasst werden, um mit den Dimensionen des Rahmenbildes übereinzustimmen. Bis zu zwei Werte können angegeben werden. Siehe
border-image-repeat
.
Barrierefreiheit
Hilfstechnologien können Rahmenbilder nicht interpretieren. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks der Seite sind, ist es besser, diese semantisch im Dokument zu beschreiben.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>
<border-image-source> =
none |
<image>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Bitmap
In diesem Beispiel wenden wir ein Rauten-Muster auf die Ränder eines Elements an. Die Quelle für das Rahmenbild ist eine ".png"-Datei mit 81 x 81 Pixeln, mit drei Rauten vertikal und horizontal:
HTML
<div id="bitmap">
This element is surrounded by a bitmap-based border image!
</div>
CSS
Um die Größe einer einzelnen Raute anzupassen, verwenden wir einen Wert von 81 geteilt durch 3, also 27
, um das Bild in Eck- und Randbereiche zu zerschneiden. Um das Rahmenbild auf den Rand des Hintergrunds des Elements zu zentrieren, setzen wir die Werte für die Erweiterung auf die Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round
dafür, dass die Rahmenschnitte gleichmäßig passen, d. h. ohne Beschneidung oder Lücken.
#bitmap {
width: 200px;
background-color: #ffa;
border: 36px solid orange;
margin: 30px;
padding: 10px;
border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
round;
}
Ergebnis
Gradienten
HTML
<div id="gradient">
This element is surrounded by a gradient-based border image!
</div>
CSS
#gradient {
width: 200px;
border: 30px solid;
border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
padding: 20px;
}
Ergebnis
Abgerundete Ränder
border-radius
hat keine Auswirkung auf das Rahmenbild. Dies liegt daran, dass border-image-outset
das Bild außerhalb des Rahmenkastens platzieren kann, sodass es keinen Sinn ergibt, dass das Rahmenbild vom Rahmenbereich abgeschnitten wird. Um abgerundete Ränder bei der Verwendung eines Rahmenbildes zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken gestalten oder, im Fall eines Gradienten, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, um dies zu tun, indem wir zwei background-image
s verwenden: ein Bild, das sich über den Rahmenkasten hinaus erstreckt, und ein weiteres für den Padding-Bereich.
HTML
<div id="rounded">
This element is surrounded by a border image with rounded corners!
</div>
CSS
#rounded {
width: 200px;
/* Use transparent so the background image is visible */
border: 10px solid transparent;
padding: 20px;
border-radius: 20px;
background-image: linear-gradient(white, white),
linear-gradient(to right, cyan, lime);
background-origin: border-box;
background-clip: padding-box, border-box;
}
Ergebnis
Hinweis:
Es gibt einen neuen Wert
, der vorgeschlagen wird, um diesen Anwendungsfall zu behandeln.background-clip
: border-area
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-image | ||||||||||||
fill | ||||||||||||
<gradient> | ||||||||||||
optional <border-image-slice> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
border
outline
box-shadow
background-image
<url>
-Typ- Gradient-Funktionen:
conic-gradient()
,repeating-conic-gradient()
,linear-gradient()
,repeating-linear-gradient()
,radial-gradient()
,repeating-radial-gradient()
- Rahmenbilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN-Blog (2023)