CSS border-image-slice Eigenschaft

Definition und Verwendung

Die Eigenschaft border-image-slice legt den inneren Versatz der Bildgrenze fest.

Siehe auch:

CSS3-Tutorial:CSS3 Ränder

Beispiel

Legt den inneren Versatz der Bildgrenze fest:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS-Syntax

border-image-slice: number|%|ausfüllen;

Anmerkung:Diese Eigenschaft legt den innere Versatz der oberen, rechten, unteren und linken Kanten des Bildes fest, das in neun Bereiche unterteilt wird: vier Ecken, vier Seiten und ein mittlerer Bereich. Wenn das Schlüsselwort fill nicht verwendet wird, wird der mittlere Bildbereich verworfen. Wenn der vierte Wert/Prozentsatz weggelassen wird, ist er gleich dem zweiten Wert. Wenn der dritte Wert weggelassen wird, ist er gleich dem ersten Wert. Wenn der zweite Wert weggelassen wird, ist er gleich dem ersten Wert.

Eigenschaftswert

Wert Beschreibung
number Zahlenwerte, die die Pixel im Bild (bei rastern Bildern) oder Vektorkoordinaten (bei Vektorbildern) darstellen.
% Prozentwerte im Verhältnis zur Bildgröße: Die Breite beeinflusst den horizontalen Versatz, die Höhe den vertikalen Versatz.
ausfüllen Behalte den mittleren Teil der Ränder der Bildgrenze bei.

Technische Details

Standardwert: 100%
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.borderImageSlice="50% 50%"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

Siehe auch border-image Eigenschaft.