CSS-Eigenschaft border-image-slice

Die Eigenschaft border-image-slice legt fest, wie das von border-image-source spezifizierte Bild in neun Bereiche aufgeteilt werden soll: vier Ecken, vier Rände, ein Mittelteil. Der Teil "middle" ist vollständig transparent, bis der Wert "fill" eingestellt ist.

Die Eigenschaft border-image-slice hat drei Werte: number, percentage und fill. Number stellt einen Randversatz in Pixeln für Rasterbilder und Koordinaten für Vektorbilder dar. Percentage stellt einen Randversatz in Prozent der Größe des Quellbildes dar. Fill verursacht, dass der mittlere Teil des Bildes wie ein Hintergrundbild angezeigt wird.

Diese Eigenschaft kann bis zu vier Werte annehmen. Negative Werte sind nicht erlaubt. Wenn ein Wert angewendet wird, werden alle vier Schichten im gleichen Abstand von ihren jeweiligen Seiten gebildet. Wenn zwei Werte angegeben sind, erzeugt der erste von oben und unten gemessene Teilen, der zweite von links und rechts gemessene Teilen. Wenn drei Werte angewendet werden, erzeugt der erste Schnitt von oben gemessen, der zweite von links und rechts, der dritte von unten. Und wenn vier Werte angegeben werden, erzeugen sie Teilen von vier Seiten.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-image-slice</h2>
    <p class="border">Hier ist border-image-slice auf 20% eingestellt.</p>
    <p>Hier ist das Originalbild verwendet:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Ein weiteres Beispiel, wo zwei Werte verwendet werden. Der erste Wert erstellt Teilen, gemessen von oben und unten, der zweite Wert erstellt Teilen, gemessen von links und rechts.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-image-slice</h2>
    <p class="border">Hier ist border-image-slice auf 30 und 50 eingestellt.</p>
    <p>Hier ist das Originalbild verwendet:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Beispiel, wo der erste Wert durch Prozentwerte dargestellt wird, der zweite Wert durch "fill".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Border-image-slice</h2>
    <p class="border"><strong>Hier ist border-image-slice auf 15 fill eingestellt.</strong></p>
    <p>Hier ist das Originalbild verwendet:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Werte

Wert Beschreibung
number Es stellt einen Randversatz in Pixeln für Rasterbilder und Koordinaten für Vektorbilder dar.
% Es stellt einen Randversatz in Prozent der Größe des Quellbildes dar.
fill Der mittlere Teil des Bildes wird als Hintergrundbild angezeigt.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+

Übe dein Wissen

Welche Anweisungen gelten für die CSS-Eigenschaft 'border-image-slice'?
Finden Sie das nützlich?