border-image-width

Die CSS-Eigenschaft border-image-width wird verwendet, um die Breite der Border-Bilddatei zu bestimmen, die von der CSS-Eigenschaft border-image-source bereitgestellt wird.

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

Die Eigenschaft border-image-width ist in der CSS Backgrounds and Borders Module Level 3 specification definiert. Ihre Funktion wird als „Zeichenbereiche“ beschrieben, was eine treffende Beschreibung dafür ist, wie die Eigenschaft einen Bereich entlang des äußeren Rands des Elements zeichnet, um Platz für das Border-Bild zu reservieren.

Syntax

border-image-width: [<length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

• Anfangswert 1
• 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
• Prozente: Relativ zur Breite/Höhe des Border-Bildbereichs
• Berechneter Wert: Vier Werte, jeder entweder eine Zahl, das Schlüsselwort auto oder ein berechneter Wert vom Typ <length-percentage>
• Animationstyp: nach berechnetem Wert

border-image-width akzeptiert zwischen einem und vier Werten, ähnlich wie die Kurzschrifteigenschaften für margin und padding

• Ein Wert: Legt alle vier Seiten mit demselben Offset-Abstand fest
• Zwei Werte: Der erste Wert legt den Offset für die obere und untere Seite fest; der zweite Wert legt den Offset für die linke und rechte Seite fest
• Drei Werte: Der erste Wert legt den Offset für die obere Seite fest; der zweite Wert legt den Offset für die rechte und linke Seite fest; der dritte legt den Offset für die untere Seite fest
• Vier Werte: Legt den Offset für jede Seite in einer Uhrzeigerreihenfolge fest, beginnend von der oberen Seite (oben, rechts, unten und links, in dieser Reihenfolge)

Werte

/* Keyword value */
border-image-width: auto;

/* Single value */
/* Sets all four sides */
border-image-width: 20%;
border-image-width: 2rem;
border-image-width: auto;

/* Two values */
/* top and bottom | left and right */
border-image-width: 4rem 10%;
border-image-width: auto 3rem;
border-image-width: 2 2rem;

/* Three values */
/* top | left and right | bottom */
border-image-width: 10% 40% 4;
border-image-width: 5 auto 10;
border-image-width: 30% 60% auto;

/* Four values */
/* top | right | bottom | left */
border-image-width: 20 3rem 40% auto;
border-image-width: 2 10rem 10% 40%;
border-image-width: 40 auto 20% auto;

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

<length-percentage [0,∞]>

Der Wert <length-percentage> gibt entweder einen Längen- oder einen Prozentwert an, der auf die CSS-Eigenschaft border-image-width angewendet werden kann, um die Breite und Höhe des Bildes auf dem Border festzulegen.

Der Längenwert gibt die Breiten- und Höhenabmessungen des Bildes in CSS-Einheiten an

.container{
  /* top and bottom | left and right */
  border-image-width: 4rem 4.5rem;
}

Das obige Beispiel gibt eine Längeneinheit von 4rem für die Offsets oben und unten des Borders und eine Längeneinheit von 4.5rem für die Offsets links und rechts des Borders an.

Der Prozentwert drückt die Breiten- und Höhenabmessungen des Border-Bildes als Prozent aus

.container {
  border-image-width: 20%;
}

Er funktioniert genauso wie der Prozentwert der border-image-slice-Eigenschaft, wobei die Prozente sich auf die Größe des Bildes beziehen. Zum Beispiel sind die Abmessungen für das in der folgenden Demo verwendete GIF 498px×280px. Wenn wir den Wert für border-image-width auf 20% setzen, beträgt die berechnete Breite 99,6px (498px * 20%) entlang der Ober- und Unterseite und der Höhe 56px (280px * 20%) entlang der rechten und linken Seiten des Borders.

number [0,∞]

Wenn eine einheitenlose, nicht-negative Ganzzahl als Wert für border-image-width verwendet wird, repräsentiert sie ein Vielfaches des border-width-Wertes des Elements. Betrachten Sie Folgendes:

.container {
  border-image-width: 2;
  border-width: 2rem;
}

Hier wird der Wert von border-image-width (2) mit dem Wert von border-width (2rem) multipliziert, um die verwendete Breite (4rem) des Border-Bildes zu berechnen.

Beachten Sie auch, dass border-image-width seinen Border aus dem Border-Box des Elements zeichnet, gemäß dem CSS Box Model. Und wenn es den Bereich zeichnet, beginnt es vom Border-Box und arbeitet sich nach innen vor.

Es unterscheidet sich vollständig von der Funktionsweise von border-width, das die Border-Box des Containers vergrößert und die Gesamtgröße des Elements erhöht.

Mit anderen Worten, border-image-width vergrößert die Bildbreite, ohne die Gesamtgröße des Elements zu beeinflussen.

auto

Die Verwendung des Schlüsselworts auto basiert entweder auf der natürlichen (nicht spezifizierten) Größe des von border-image-source bereitgestellten Bildes oder auf dem border-width-Wert des Elements.

Wie wählt es aus, welches verwendet wird? Wenn das Bild eine natürliche (oder „intrinsische“) Größe hat, ist dies der Wert. Wenn das Bild beispielsweise 200px x 200px groß ist, dann sind 200px die angewendeten Werte. Wenn keine natürliche Größe vorhanden ist, z. B. bei einem SVG ohne Breiten- oder Höhenattribute, wird stattdessen der Wert von border-width verwendet.

Und was ist, wenn das Element keinen border-width hat? Der Anfangsstil von border-width ist none, was zu einer Breite von Null führt.

Mit „natürlicher Größe“ meinen wir die vollen Breiten- und Höhenabmessungen des Bildes. Zum Beispiel, wenn wir ein <img> auf eine Seite ziehen und es 500px x 500px groß ist, das ist die natürliche Größe. Das ist anders als die Größe des Bildes in seinem Kontext. Wenn wir zum Beispiel dasselbe Bild mit <img width="200"> einstellen, ist die natürliche Größe immer noch 500px x 500px, auch wenn es auf dem Bildschirm bei 200px gerendert wird.

Überlappende Borders

Nehmen wir an, wir haben ein Border-Bild mit einer natürlichen Größe von 500px x 500px

.element {
  border-image-source: url("/image-500px.webp");
}

Nehmen wir nun an, wir setzen border-image-width auf einen Wert, der die Bildabmessungen überschreitet

.element {
  border-image-source: url("/image-500px.webp");
  border-image-width: 2; /* 400px = 200px * 2 */
  border-width: 200px;
}

Die Borders würden sich in dieser Situation überlappen, da die Offsets in den Breiten- und Höhenabmessungen insgesamt 800px ergeben. Die Eigenschaft ist jedoch „intelligent“ in dem Sinne, dass sie den angewendeten Wert von border-image-width jeder Seite proportional reduziert, bis sich die Borders nicht mehr überlappen. In diesem Fall muss der Wert um 100px pro Offset reduziert werden, um die natürlichen Abmessungen des Bildes anzupassen.

Das Stylesheet liefert die Formel, die der Browser verwendet, um dies zu ermitteln

f = min(Lwidth/(Wleft + Wright), Lheight/(Wtop + Wbottom))

Wobei

Lwidth = width of the border image area (`border-width`)
Lheight = height of the border image area
Wleft = Left offset of the border image width
Wright = Right offset of the border image width
Wtop = Top offset of the border image width
Wbottom = Bottom offset of the border image width

Nachdem wir f berechnet haben, prüfen wir, ob f < 1 ist, und wenn ja, multiplizieren wir die Offset-Werte (Wleft, Wright, Wtop, Wbottom ) mit f, um sie zu reduzieren.

Wenn wir unsere Werte aus dem obigen Beispiel in unsere Gleichung einsetzen, erhalten wir:

f = min(200px/(400px + 400px), 500px/(400px + 400px)) = 0.25

Da f kleiner als 1 ist, multiplizieren wir alle Offsets mit 0,25, was zu dem neuen Offset-Wert von 100px führt.

Demo

Ändern Sie die unten stehenden Werte für border-image-width und border-width, um zu sehen, wie jede Eingabe die Bildgröße beeinflusst.

Browser-Unterstützung

Weitere Informationen

• CSS Backgrounds and Borders Module Level 3 (W3C Spezifikation)
• Border-Image verstehen (CSS-Tricks)
• How To Add Border Images and Gradient Borders with Pure CSS (DigitalOcean)

Verwandte Tricks!

Verwandt