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 eine separate border-style
-Deklaration angeben, falls das Randbild nicht geladen werden kann. Obwohl die Spezifikation dies nicht ausdrücklich vorschreibt, rendern einige Browser das Randbild nicht, wenn border-style
auf none
oder border-width
auf 0
gesetzt ist.
Bestandteil-Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise 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 einem bis zu fünf der unten aufgeführten Werte angegeben werden.
Hinweis:
Wenn der berechnete Wert von border-image-source
none
ist, oder wenn das Bild nicht angezeigt werden kann, wird stattdessen die border-style
angezeigt.
Werte
<'border-image-source'>
-
Die Bildquelle. Siehe
border-image-source
. <'border-image-slice'>
-
Die Dimensionen zum Zerschneiden des Quellbilds in Regionen. Es können bis zu vier Werte angegeben werden. Siehe
border-image-slice
. <'border-image-width'>
-
Die Breite des Randbilds. Es können bis zu vier Werte angegeben werden. Siehe
border-image-width
. <'border-image-outset'>
-
Der Abstand des Randbilds von der Außenseite des Elements. Es können bis zu vier Werte angegeben werden. Siehe
border-image-outset
. <'border-image-repeat'>
-
Definiert, wie die Randbereiche des Quellbilds angepasst werden, um die Dimensionen des Randbilds zu erfüllen. Es können bis zu zwei Werte angegeben werden. Siehe
border-image-repeat
.
Barrierefreiheit
Assistive Technologie kann Randbilder nicht interpretieren. Wenn das Bild Informationen enthält, die für das Verständnis des Hauptzwecks der Seite entscheidend sind, sollte es besser semantisch im Dokument beschrieben werden.
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 wird ein Rautenmuster auf die Ränder eines Elements angewendet. Die Quelle für das Randbild ist eine ".png"-Datei mit 81 x 81 Pixeln, die drei Rauten vertikal und horizontal enthält:
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 Ecken- und Kantenbereiche zu schneiden. Um das Randbild auf dem Rand des Hintergrunds des Elements zu zentrieren, setzen wir die Abstandswerte gleich der Hälfte der Breitenwerte. Schließlich sorgt ein Wiederholungswert von round
dafür, dass die Randabschnitte gleichmäßig passen, d.h. ohne Abschneiden 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
Verlauf
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 Wirkung auf das Randbild. Dies liegt daran, dass border-image-outset
in der Lage ist, das Bild außerhalb der Randbox zu platzieren, sodass es keinen Sinn ergibt, dass das Randbild durch den Randbereich abgeschnitten wird. Um abgerundete Ränder bei der Verwendung eines Randbilds zu erstellen, sollten Sie das Bild selbst mit abgerundeten Ecken erstellen oder, im Falle eines Verlaufs, es stattdessen als Hintergrund zeichnen. Unten zeigen wir einen Ansatz, wie dies erreicht werden kann, indem zwei background-image
s verwendet werden: eines, das sich über die Randbox hinaus erstreckt, und ein anderes für die Padding-Box.
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 wird ein neuer Wert
vorgeschlagen, um diesen Anwendungsfall zu lösen.background-clip
: border-area
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
border
outline
box-shadow
background-image
<url>
Typ- Gradientenfunktionen:
conic-gradient()
,repeating-conic-gradient()
,linear-gradient()
,repeating-linear-gradient()
,radial-gradient()
,repeating-radial-gradient()
- Border-Bilder in CSS: Ein Schwerpunktbereich für Interop 2023 auf dem MDN-Blog (2023)