Border-image-slice | CSS-Tricks

CSS Almanac → Properties → B → border-image-slice

Sunkanmi Fafowora on 20. Dez. 2022

Die CSS-Eigenschaft border-image-slice teilt dem Browser mit, wo ein als Randbild verwendetes Bild geschnitten werden soll, um die Teile der Ränder eines Elements zu erstellen.

.element {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 30%;
  border-image-repeat: repeat; 
}

Die Eigenschaft border-image-slice ist in der Spezifikation "CSS Backgrounds and Borders Module Level 3" definiert.

Wenn das Randbild geschnitten wird, wird es in neun Abschnitte unterteilt – die vier Ecken, die vier Seiten und die Mitte – indem vier unsichtbare Schnittlinien über das Bild gezeichnet werden, die Regionen bilden, die einer Art Raster ähneln. Die Eigenschaftswerte verschieben dieses Raster von Schnittlinien von den jeweiligen Seiten des Bildes.

Bereiche 1-4 stellen die vier Eckbereiche dar.
Bereiche 5-8 stellen die vier Seitenbereiche dar.
Bereich 9 stellt den mittleren Bereich dar.

Demo

Passen Sie die border-image-slice-Werte in der folgenden Demo an, um zu sehen, wie sich das Bild bei unterschiedlichen Längen oder Prozentwerten verschiebt.

Syntax

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

Anfangswert: 100%
Gilt für: alle Elemente (einschließlich des Pseudo-Elements ::first-letter), außer interne Tabellenelemente, wenn border-collapse auf collapse gesetzt ist.
Vererbt: nein
Prozentwerte: relativ zur Größe des Quellbildes
Berechneter Wert: ein bis vier Werte, jeder entweder eine Zahl oder ein Prozentsatz; plus ein fill-Schlüsselwort, falls angegeben
Animationstyp: nach berechnetem Wert

border-image-slice akzeptiert zwischen einem und vier Werten, die festlegen, wo das Randbild entlang der entsprechenden Seite jedes Werts geschnitten wird.

Ein Wert: Legt alle vier Seiten – oben, rechts, unten und links – mit demselben Abstand fest.
Zwei Werte: Der erste Wert legt den Abstand für die oberen und unteren Seiten fest; der zweite Wert legt den Abstand für die linken und rechten Seiten fest.
Drei Werte: Der erste Wert legt den Abstand für die obere Seite fest; der zweite Wert legt den Abstand für die rechten und linken Seiten fest; der dritte Wert legt den Abstand für die untere Seite fest.
Vier Werte: Legt den Abstand für jede Seite in der Reihenfolge der Uhrzeigersinn fest, beginnend mit der oberen Seite – oben, rechts, links und unten, jeweils.

Werte

/* Single value */
/* Sets all four sides */
border-image-slice: 20; 
border-image-slice: 30%;

/* Two values */
/* top and bottom | right and left */
border-image-slice: 30% 20;
border-image-slice: 10% 30%;
border-image-slice: 20% 10%;

/* Three values */
/* top | left and right | bottom */
border-image-slice: 40 31 11;
border-image-slice: 12 41 15;
border-image-slice: 10% 30% 5%;

/* Four values */
/* top | right | bottom | left */
border-image-slice: 15% 20 10% 10;
border-image-slice: 10 30 40 10;
border-image-slice: 15% 20 10% 40;

/* Optional `fill` value */
border-image-slice: 10 fill;
border-image-slice: 30% 20 fill;
border-image-slice: 40 31 11 fill;
border-image-slice: 10 30 40 10 fill;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;

`Zahl [0,∞]`

Dies stellt einen Längenwert in Pixeln von Null bis unendlich dar, wenn das Randbild ein Rasterbild ist. Wenn das Randbild ein Vektorbild ist – wie SVG – ohne natürliche Abmessungen, basiert die Zahl auf den Vektorkoordinaten.

Die folgende Demo ist ein Beispiel für ein Rasterbild, bei dem die Eigenschaft border-image-slice auf 125 gesetzt ist, was zu Schnitten führt, die um 125px versetzt sind.

Ein paar Dinge, die Sie bei der Arbeit mit Längenwerten beachten sollten

Negative Werte sind nicht erlaubt.
Werte, die größer als die Bildgröße sind, werden zu 100% berechnet.
Wenn die Summe der linken und rechten Seiten größer ist als die Breite des Bildes, dann sind die oberen, unteren und mittleren Bereiche leer, als ob ein transparentes Bild verwendet worden wäre. Gleiches gilt für Situationen, in denen die Summe der oberen und unteren Werte größer ist als die Bildhöhe – die linken, rechten und mittleren Bereiche sind leer.

`Prozent [0,∞]`

Prozentwerte beziehen sich auf die Größe des Randbildes. Zum Beispiel entspricht ein border-image-slice: 50% bei einem 200px-Quadratbild 100px.

Die folgende Demo ist ein Beispiel für ein Rasterbild von 740px × 493px, bei dem die Eigenschaft border-image-slice auf 10% gesetzt ist. Dies führt zu Schnitten, die um 74px (740px * 10%) an den oberen und unteren Seiten und um 49,3px (493px * 10%) an den linken und rechten Seiten versetzt sind.

`fill` (optional)

Der Wert fill für border-image-slice in CSS fungiert wie ein Hintergrundbild für den mittleren Bereich und füllt ihn mit dem bereitgestellten Randbild. Es ist ein **optionaler** Wert, der die Zahlenbeschränkung für die maximale Anzahl von Werten, die border-image-slice annehmen kann, vollständig ignoriert. Das bedeutet, dass wir, wenn alle vier Werte für die oberen, rechten, unteren und linken Ränder festgelegt sind, fill als fünften Wert festlegen können, der den mittleren Teil des Elements mit dem Randbild füllt.

.container {
  /* top | right | bottom | left | middle */
  border-image-slice: 78 65 70 75 fill;
}

Und es spielt keine Rolle, wo wir fill in der Deklaration platzieren – jede Reihenfolge funktioniert!

.container {
  /* This is valid too! */
  border-image-slice: 78 65 fill 70 75;
}

Im folgenden Beispiel wird das Schlüsselwort fill verwendet, um das Randbild auf den mittleren Bereich des Elements anzuwenden

Damit der Wert fill funktioniert, müssen Sie zuerst mindestens einen Wert für die Eigenschaft border-image-slice festlegen. Ohne dies wird im mittleren Bereich nichts angezeigt.