CSS-Eigenschaft border-image-slice

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.