W3docs
de
Anmelden

CSS border-image-source Eigenschaft

Die CSS-Eigenschaft border-image-source legt ein Bild als Rahmen eines Elements fest. Beispiele und zum Ausprobieren.

Die CSS-Eigenschaft border-image-source legt das Bild fest, das zum Zeichnen des Rahmens eines Elements verwendet wird, anstatt des regulären border-style. Sie beantwortet die Frage „Welches Bild soll in Abschnitte unterteilt und rund um die Box platziert werden?", während die ergänzenden Eigenschaften bestimmen, wie dieses Bild ausgeschnitten und angeordnet wird.

Diese Seite beschreibt, welche Werte border-image-source akzeptiert, wie sie mit den anderen border-image-*-Eigenschaften zusammenarbeitet, welche Fallstricke dazu führen können, dass ein Rahmenbild lautlos verschwindet, und zeigt ausführbare Beispiele, die Sie bearbeiten können.

border-image-source ist eine der CSS3-Eigenschaften und wird fast immer zusammen mit border-image-slice über die Kurzschreibweise border-image festgelegt.

Wann Sie sie verwenden würden

Greifen Sie auf ein Rahmenbild zurück, wenn ein einfacher border das gewünschte Aussehen nicht ausdrücken kann – ein dekorativer Rahmen, ein Band, eine handgezeichnete Kante oder ein Farbverlauf-Umriss. Da die Quelle ein beliebiges Bild sein kann, einschließlich eines CSS-Farbverlaufs, erhalten Sie Effekte, die border-color allein nicht erzeugen kann.

Wie border-image-source mit den anderen Eigenschaften zusammenarbeitet

border-image-source benennt lediglich das Bild. Vier Geschwistereigenschaften steuern den Rest, und ein Rahmenbild wird erst gerendert, wenn auch border-image-slice gesetzt ist:

Wichtige Fallstricke

  • Setzen Sie zuerst einen border. Ein Rahmenbild füllt den Bereich, der durch den Rahmen des Elements definiert ist, daher benötigen Sie weiterhin eine border-width (üblicherweise border: 10px solid transparent;). Ohne Rahmenbreite gibt es nichts, in das gemalt werden kann.
  • border-image-slice ist erforderlich. Wenn nur die Quelle gesetzt wird, wird nichts angezeigt; der Browser benötigt Slice-Werte, um zu wissen, wo sich die Ecken befinden.
  • none oder ein fehlgeschlagenes Laden greift auf border-style zurück. Wenn das Bild nicht angezeigt werden kann, werden die regulären Rahmenstile verwendet – geben Sie dem Element einen sichtbaren border-style als Sicherheitsnetz.
Anfangswertnone
Gilt fürAlle Elemente, außer interne Tabellenelemente, wenn border-collapse auf "collapse" gesetzt ist. Gilt auch für ::first-letter.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM Syntaxobject.style.borderImageSource = "url()";

Syntax

CSS border-image-source Werte

border-image-source: none | image | initial | inherit;

Beispiel der border-image-source-Eigenschaft:

CSS border-image-source Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS border-image-source Beschreibung](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source Beispielergebnis" =420x)

Beispiel mit einem CSS-Farbverlauf als Quelle

Die Quelle muss keine Datei sein – jedes CSS-Bild funktioniert, einschließlich Farbverläufen. Damit wird ein bunter Rahmen ganz ohne Bild-Asset gezeichnet:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image-source: linear-gradient(45deg, #6610f2, #20c997);
        border-image-slice: 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Hier schneidet border-image-slice: 1 ein einzelnes Pixel aus, was für einen gleichmäßigen Farbverlauf ausreicht, da dieser sich über jede Kante fortsetzt.

Werte

WertBeschreibung
noneEs wird kein Bild verwendet; das Element greift auf seinen border-style zurück. Dies ist der Standardwert.
imageBeliebiges CSS <image>: eine url() zu einer Datei oder ein Farbverlauf wie linear-gradient(...) / radial-gradient(...).
initialSetzt die Eigenschaft auf ihren Standardwert (none).
inheritErbt den Wert vom übergeordneten Element.

Verwandte Eigenschaften

Übungen

Übung
Was ist die korrekte Verwendung der border-image-source-Eigenschaft in CSS?
Was ist die korrekte Verwendung der border-image-source-Eigenschaft in CSS?
Was this page helpful?