CSS border-image-slice-Eigenschaft

Die Eigenschaft border-image-slice legt fest, wie das von border-image-source angegebene Bild in neun Bereiche geschnitten wird: vier Ecken, vier Kanten und ein mittlerer Bereich. Der „mittlere“ Bereich ist vollständig transparent, bis der Wert „fill“ festgelegt wird. Es handelt sich um eine der CSS3-Eigenschaften.

Die Eigenschaft border-image-slice verfügt über drei Werte: number, percentage und fill. number gibt einen Kantenversatz in Pixeln für Rasterbilder bzw. Koordinaten für Vektorbilder an. percentage gibt einen Kantenversatz als Prozentsatz der Größe des Quelldateibildes an. fill bewirkt, dass der mittlere Teil des Bildes wie ein Hintergrundbild angezeigt wird.

Diese Eigenschaft kann bis zu vier Werte annehmen. Negative Werte sind nicht erlaubt. Wird nur ein Wert angegeben, werden alle vier Schnitte in gleichem Abstand von ihren jeweiligen Seiten erstellt. Werden zwei Werte angegeben, erstellt der erste Schnitte von oben und unten, der zweite von links und rechts. Bei drei Werten erstellt der erste Schnitte von oben, der zweite von links und rechts, der dritte von unten. Bei vier Werten werden Schnitte von allen vier Seiten erstellt.

Anfangswert	100 %.
Anwendbar auf	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.borderImageSlice = "10%";

Syntax

Syntax der CSS border-image-slice-Eigenschaft

css

border-image-slice: number | % | fill | initial | inherit;

Beispiel für die border-image-slice-Eigenschaft:

Beispiel für die CSS border-image-slice-Eigenschaft mit einem %-Wert (Prozent)

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 20%.</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Ergebnis

CSS border-image-slice Property

Ein weiteres Beispiel mit zwei Werten. Der erste Wert erstellt Schnitte von oben und unten, der zweite von links und rechts.

Beispiel für die border-image-slice-Eigenschaft mit zwei Werten:

Beispiel für die CSS border-image-slice-Eigenschaft mit zwei Werten

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 30 and 50.</p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Beispiel für die border-image-slice-Eigenschaft mit den Werten „%“ und „fill“:

Beispiel für die CSS border-image-slice-Eigenschaft mit Prozent- und fill-Werten

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
    <p>Here is the original image used:</p>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
number	Gibt einen Kantenversatz in Pixeln für Rasterbilder bzw. Koordinaten für Vektorbilder an.	Testen »
%	Gibt einen Kantenversatz als Prozentsatz der Größe des Quelldateibildes an.	Testen »
fill	Bewirkt, dass der mittlere Teil des Bildes als Hintergrundbild angezeigt wird.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was bewirkt die CSS-Eigenschaft border-image-slice?

Sie steuert den Umfang des Eingabefeldes, das innerhalb des Textareas liegen soll.Sie teilt das für den Rand verwendete Bild in 9 Bereiche auf: 4 Ecken, 4 Kanten und einen mittleren Bereich.Sie wird für 3D-Transformationen, Übergänge und Animationen in HTML und CSS verwendet.Sie definiert, wie das Randbild im Verhältnis zur Randbox gefüllt und skaliert wird.

CSS border-image-slice-Eigenschaft ​

Syntax ​

Beispiel für die border-image-slice-Eigenschaft: ​

Ergebnis ​

Beispiel für die border-image-slice-Eigenschaft mit zwei Werten: ​

Beispiel für die border-image-slice-Eigenschaft mit den Werten „%“ und „fill“: ​

Werte ​

Praxis ​

CSS border-image-slice-Eigenschaft

Syntax

Beispiel für die border-image-slice-Eigenschaft:

Ergebnis

Beispiel für die border-image-slice-Eigenschaft mit zwei Werten:

Beispiel für die border-image-slice-Eigenschaft mit den Werten „%“ und „fill“:

Werte

Praxis