border-image-source

Die CSS-Eigenschaft border-image-source erstellt Ränder um Elemente unter Verwendung einer Bilddatei oder eines CSS-Verlaufs als Quelle.

.container {
  border-width: 2rem;
  border-style: dotted;
  border-color: grey;
  border-image-source: url('path/to/image.jpg');
  border-image-repeat: repeat;
  border-image-slice: 100;
}

Beachten Sie in diesem Beispiel, dass border-image-source eine von drei border-image-* Eigenschaften ist

• border-image-source: Gibt die für den Rand verwendete Bilddatei oder den Verlauf an.
• border-image-repeat: Gibt an, ob das Bild beim Zeichnen des Rands wiederholt oder einmal angezeigt werden soll.
• border-image-slice: Teilt das Randbild in Regionen auf, die zum Abstandhalten und Größenanpassen des Bildes verwendet werden.

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

Syntax

border-image-source = none | <image>;  
where
  <image> = <url> | <gradient> 

…wobei <image> als URL, die auf eine Bilddatei verweist, oder als CSS-Verlauf ausgedrückt werden kann.

• Initialwert: none
• Gilt für: Alle Elemente, außer internen Tabellenelementen, wenn border-collapse auf collapse gesetzt ist
• Vererbt: nein
• Berechneter Wert: none oder das berechnete <image>
• Prozentsätze: N/A
• Animationstyp: diskret

Werte

/* Keyword values */
border-image-source: none;
border-image-source: <image>;

/* <image> values */
border-image-source: url('image.png');
border-image-source: url('svg-file.svg');
border-image-source: <gradient>;

/* <gradient> values */
border-image-source: linear-gradient(to bottom left, lightblue, #00000);
border-image-source: repeating-linear-gradient(15deg, #900000, #ee2400, #ffb09c 2rem );
border-image-source: radial-gradient(to top right, #7AD7F0, #92DFF3 0.5rem, #F5FCFF);
border-image-source: repeating-radial-gradient(to right, #B7E9F7, #DBF3FA);
border-image-source: conic-gradient(#FFFEE9, #FFFBC8, #FFF59E, #FFF157);

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

none

Dies ist der Standardwert für die CSS-Eigenschaft border-image-source. Er bedeutet, dass kein Bild oder keine Verlaufsfarbe auf das ausgewählte Element gesetzt wird.

Die <gradient>-Syntax ermöglicht es Ihnen, eine Gruppe von Farben festzulegen und sie überlappen zu lassen. Sie repräsentiert 5 Farbverlaufsfunktionen, die da sind:

• linear-gradient()
• radial-gradient()
• conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

<image> als url()

<image> akzeptiert die url()-Funktion mit ihren gültigen Eingaben, einschließlich eines Bildes mit gültiger Erweiterung, eines SVG oder eines externen Links zum Bild. Es ist im Grunde dasselbe, wie background-image die url()-Funktion akzeptiert und die von ihr angesprochene Bilddatei anzeigt. Das folgende Beispiel erstellt einen Rand aus einer JPG-Bilddatei, die in der url()-Funktion angegeben ist.

.container {
  border-image-source: url("path/to/image.jpg");
  border-image-repeat: repeat;
  border-image-slice: 150 75;
  /* etc */
}

<image> als <gradient>

Der Wert <image> kann auch als CSS <gradient> ausgedrückt werden. Verläufe sind lediglich vom Browser gezeichnete Bilder, weshalb sie als gültiger <image>-Wert gelten. Und jede Art von CSS-Verlauf wird unterstützt.

• linear-gradient()
• radial-gradient()
• conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

Wir legen sie genauso fest, wie wir sie festlegen würden, wenn sie mit der background-image-Eigenschaft gesetzt wären.

.container{
  border-image-source: repeating-linear-gradient(
    15deg,
    #900000,
    #ee2400,
    #ffb09c 2rem
  );
  border-image-repeat: repeat;
  border-image-slice: 100 75;
  /* etc */
}

Oh, Sie möchten den Verlauf animieren? Sicher! Es erfordert die Verwendung einer benutzerdefinierten CSS-@property — die zum Zeitpunkt der Erstellung dieses Textes nur in Chrome unterstützt wird —, aber es ist durchaus möglich, beispielsweise den Winkel des Verlaufs zu drehen.

Erfahren Sie mehr über die Verwendung von @property in „Interpolating Numeric CSS Variables“.

Randbilder können SVG sein

Neben Bildern mit einer gültigen Bild-Erweiterung können auch svg-Dateien als Ränder verwendet werden. Verknüpfen Sie die SVG-Datei wie gewohnt in der url()-Funktion.

.container {
  border-width: 3rem;
  border-style: solid;
  border-image-source: url("path/to/image.svg");
  /* etc. */
}

Auch kodierte SVG-Dateien funktionieren, wenn Sie das so bevorzugen.

Wenn Sie mit SVG als Randbild wirklich knifflig werden wollen, lesen Sie „Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis“ von Preethi. Die Beispiele dort verwenden die background-image-Eigenschaft, aber sie funktionieren auch mit border-image-source.

Randradius ist ein No-Go

Kurz gesagt: Die Eigenschaft border-image-source funktioniert nicht mit der border-radius-Eigenschaft. Sie können border-radius für dasselbe Element festlegen, aber die Ecken des Randbildes behalten ihre scharfen Kanten.

Wenn Sie diese abgerundeten Ecken unbedingt benötigen, sollten Sie die Verwendung von background-image für das ::before-Pseudoelement des Elements in Betracht ziehen und border-radius darauf anwenden.

Hier ist die ausführlichere Erklärung. Während meiner Recherche verwendet das folgende Beispiel die border-image-source-Eigenschaft, um einen repeating-linear-gradient-Rand mit einem border-radius von 50% zu erstellen. Beachten Sie, wie die Ecken scharf bleiben, obwohl DevTools eine border-radius-Deklaration anzeigt.

So sieht es ohne border-image-source aus.

Ein Issue wurde eröffnet im Repository der Spezifikation, aber es gibt keine Angabe, wann oder ob es zum Zeitpunkt der Erstellung dieses Textes gelöst wird.

Performance

Beachten Sie bei der Verwendung von Bildern oder externen URLs für Ihre Bilder in border-image-source, dass Sie Maßnahmen ergreifen, um deren Größe vor der Verwendung zu reduzieren, da das Laden großer Bilder die Gesamtseitengröße erheblich erhöht, was zu einer langsameren Website führt. Es lohnt sich immer, Ihre Bilder zu optimieren, bevor Sie sie mit der url()-Funktion aufrufen, und auf moderne Bildformate zurückzugreifen, die tendenziell leichter sind.

Demo

Browser-Unterstützung

Die Unterstützung ist in allen wichtigen Browsern gut. Es ist auch großartig, Ihre border-color festzulegen, falls Ihr Bild nicht geladen werden kann oder die Ressource aufgrund von Serverproblemen nicht geladen werden kann.

section {
  border-color: grey; /* fallback color */
  border-width: 2rem;
  border-image-source: url("image.png");
}

Weitere Informationen

• CSS Backgrounds and Borders Module Level 3 (W3C Spezifikation)
• border-image-source (MDN)
• How To Add Border Images and Gradient Borders with Pure CSS (DigitalOcean)

Verwandte Tricks!

Verwandt