CSS-Eigenschaft: border-image-slice

Q: Was ist border-image-slice?

border-image-slice ist eine CSS-Eigenschaft, die es ermöglicht, ein Bild als Rahmen zu verwenden. Mit dieser Eigenschaft kannst du das Bild in neun Teile aufteilen und dann jedes dieser Teile als Rahmen verwenden. Die Teile werden mit der border-image-slice-Eigenschaft definiert.

Ole Mai

Stand: 07.02.2024

Dauer: 2 Min.

Anleitung

Niveau: 1/5

In diesem Artikel erfährst du, was border-image-slice ist und wie du es verwenden kannst, um das Design deiner Website zu verbessern.

Was ist border-image-slice?

border-image-slice ist eine CSS-Eigenschaft, die es ermöglicht, ein Bild als Rahmen zu verwenden. Mit dieser Eigenschaft kannst du das Bild in neun Teile aufteilen und dann jedes dieser Teile als Rahmen verwenden. Die Teile werden mit der border-image-slice-Eigenschaft definiert.

Wie wird border-image-slice verwendet?

Der Syntax für border-image-slice sieht folgendermaßen aus:

border-image-slice: [fill] || <number> {1,4} && fill?

Die Werte, die du in dieser Eigenschaft verwenden kannst, sind:

[fill]: Ein optionaler Wert, der bestimmt, ob das Bild in den inneren Bereich des Rahmens eingefügt werden soll. Wenn dieser Wert auf „fill“ gesetzt ist, wird das Bild in den inneren Bereich eingefügt. Wenn dieser Wert nicht angegeben wird oder auf „auto“ gesetzt ist, wird das Bild nicht in den inneren Bereich eingefügt.
<number>: Eine Zahl, die angibt, wie breit das jeweilige Teil des Rahmens sein soll. Wenn du nur eine Zahl angibst, wird diese Zahl für alle vier Teile des Rahmens verwendet. Wenn du mehrere Zahlen angibst, wird die erste Zahl für den oberen Teil, die zweite Zahl für den rechten Teil, die dritte Zahl für den unteren Teil und die vierte Zahl für den linken Teil verwendet.
fill?: Ein optionaler Wert, der angibt, ob der Bereich zwischen den Teilen des Rahmens mit dem Bild gefüllt werden soll. Wenn dieser Wert angegeben wird, wird der Bereich zwischen den Teilen des Rahmens mit dem Bild gefüllt. Wenn dieser Wert nicht angegeben wird, wird der Bereich nicht gefüllt.

Beispiele

Hier sind einige Beispiele für die Verwendung von border-image-slice:

border-image-slice: 30 fill;

In diesem Beispiel wird das Bild in 9 Teile aufgeteilt, wobei das mittlere Teil mit dem Bild gefüllt wird. Die Breite des mittleren Teils beträgt 30px.

border-image-slice: 30 40 20 50 fill;

In diesem Beispiel wird das Bild in 9 Teile aufgeteilt, wobei das mittlere Teil mit dem Bild gefüllt wird. Die Breite des oberen Teils beträgt 30px, die des rechten Teils 40px, die des unteren Teils 20px und die des linken Teils 50px.