W3docs
de
Anmelden

CSS border-image-slice Eigenschaft

Die CSS-Eigenschaft border-image-slice legt fest, wie das durch border-image-source angegebene Bild in neun Bereiche aufgeteilt wird.

Die CSS-Eigenschaft border-image-slice legt fest, wie das durch border-image-source festgelegte Bild aufgeteilt wird, damit der Browser die Teile als Rahmen verwenden kann. Das Bild wird in neun Bereiche unterteilt: vier Ecken, vier Kanten und einen mittleren Teil. Sie gehört zu den CSS3-Eigenschaften.

Stellen Sie sich zwei horizontale und zwei vertikale Linien vor, die über das Quellbild gezogen werden. Dort, wo sie sich kreuzen, teilen sie das Bild in ein 3×3-Raster auf. Die vier Eckstücke werden an den Ecken des Element-Rahmens platziert, die vier Kantenstücke werden entlang jeder Seite gestreckt oder wiederholt (gesteuert durch border-image-repeat), und das mittlere Stück wird standardmäßig verworfen — es bleibt vollständig transparent, es sei denn, Sie fügen das Schlüsselwort fill hinzu, wodurch es wie ein Hintergrundbild hinter dem Inhalt gezeichnet wird.

border-image-slice ist die Eigenschaft, die bestimmt, wo diese vier Linien fallen. Alleine bewirkt sie nichts Sichtbares; sie funktioniert immer zusammen mit border-image-source und einer Nicht-null-border-width (oder der border-image-width des Kurzschreibweise). Deshalb setzt jedes Beispiel unten auch einen transparenten border und verwendet die border-image-Kurzschreibweise, um die Quelle anzugeben.

Wie die Werte funktionieren

Die Eigenschaft akzeptiert eine number, einen percentage-Wert und ein optionales fill-Schlüsselwort:

  • number — ein Kantenversatz gemessen in Pixeln für Rasterbilder (PNG, JPEG) und in Koordinaten für Vektorbilder (SVG). Hinweis: Die Zahl ist hier einheitenlos — schreiben Sie 30, nicht 30px.
  • percentage — ein Kantenversatz als Prozentsatz der Größe des Quellbildes (seine Breite für die linken/rechten Schnitte, seine Höhe für die oberen/unteren Schnitte).
  • fill — behält den mittleren Bereich bei und zeigt ihn an, anstatt ihn zu verwerfen.

Sie können ein bis vier Versatzwerte angeben. Negative Werte sind nicht erlaubt, und Versätze, die größer als das Bild sind, werden begrenzt. Die Werte folgen der CSS-Standardreihenfolge für Kanten:

Angegebene WerteBedeutung
20%Alle vier Seiten werden im gleichen Abstand geschnitten.
30 50Oben & unten = 30; links & rechts = 50.
30 50 10Oben = 30; links & rechts = 50; unten = 10.
30 50 10 5Oben = 30; rechts = 50; unten = 10; links = 5 (im Uhrzeigersinn von oben).

Wann sollte ich es verwenden?

Verwenden Sie border-image-slice, wenn Sie einen dekorativen Rahmen aus einem einzelnen Bild aufbauen — aufwändige Bordüren, Bandkanten, Comic-Panels oder abgerundete „Sprechblasen"-Grafiken, die auf jede Elementgröße skaliert werden müssen, ohne die Ecken zu verzerren. Indem die Ecken vom dehnbaren Mittelteil der Kanten getrennt werden, bleiben die Ecken bei jeder Elementbreite scharf, während sich die Seiten wiederholen oder dehnen, um zu passen.

Anfangswert100%.
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbungNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.borderImageSlice = "10%";

Syntax

Syntax der CSS-Eigenschaft border-image-slice

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

Beispiel der border-image-slice-Eigenschaft:

Beispiel der CSS-Eigenschaft border-image-slice mit einem %-Wert (Prozentwert)

<!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>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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>
Probier es selbst »

Ergebnis

CSS border-image-slice Eigenschaft

Im nächsten Beispiel werden zwei Werte verwendet. Der erste Wert (30) erzeugt Schnitte gemessen von oben und unten, und der zweite Wert (50) erzeugt Schnitte gemessen von links und rechts.

Beispiel der border-image-slice-Eigenschaft mit zwei Werten:

Beispiel der CSS-Eigenschaft border-image-slice mit zwei Werten

<!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>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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>
Probier es selbst »

Im folgenden Beispiel wird der %-Wert mit dem Schlüsselwort fill kombiniert, sodass der verworfene mittlere Bereich des Bildes auch hinter dem Inhalt des Absatzes gezeichnet wird.

Beispiel der border-image-slice-Eigenschaft mit den Werten "%" und "fill":

Beispiel der CSS-Eigenschaft border-image-slice mit Prozent- und fill-Werten

<!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>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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
numberStellt einen Kantenversatz in Pixeln für Rasterbilder und in Koordinaten für Vektorbilder dar.Ausprobieren »
%Stellt einen Kantenversatz als Prozentsatz der Größe des Quellbildes dar.Ausprobieren »
fillLässt den mittleren Teil des Bildes als Hintergrundbild anzeigen.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

border-image-slice ist eine von mehreren Langhand-Eigenschaften, aus denen die Kurzschreibweise border-image besteht. Um ein vollständiges Bild davon zu erhalten, wie Rahmenbilder aufgebaut werden, siehe auch:

Übung

Übung
Was macht die CSS-Eigenschaft border-image-slice?
Was macht die CSS-Eigenschaft border-image-slice?
Was this page helpful?