CSS-Eigenschaft border-image

Die Shorthand-Eigenschaft border-image ermöglicht es, ein Bild als Rahmen um ein Element anzugeben. Diese Eigenschaft wird mithilfe von anderen Eigenschaften angegeben. Ausgelassene Werte werden auf ihre Standardwerte gesetzt. Unten finden Sie einige Hinweise zu den einzelnen Werten:

  • border-image-source - Wenn der Wert "none" ist oder das Bild nicht angezeigt werden kann, werden die Rahmenstile verwendet.
  • border-image-slice - Der mittlere Teil des Bildes wird als vollständig transparent behandelt, es sei denn, der Wert "fill" eingestellt ist.
  • border-image-width - Wenn der Wert dieser Eigenschaft größer ist als border-width des Elements, erstreckt sich das Randbild über den Rand von padding (und/oder content) hinaus. Bemerken Sie bitte, dass diese Eigenschaft mit einem, zwei, drei oder vier Werten angegeben werden kann.
  • border-image-outset - Es kann auch mit einem, zwei, drei oder vier Werten angegeben werden.
  • border-image-repeat - Es kann durch zwei Werte angegeben werden. Wenn der zweite Wert weggelassen wird, wird angenommen, dass er mit dem ersten identisch ist. Und wenn wir nur einen Wert einstellen, gilt das gleiche Verhalten auf allen vier Seiten, wenn wir zwei Werte einstellen, gilt der erste für oben und unten, der zweite für links und rechts.
Anfangswert none 100% 1 0 stretch
Gilt für Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf "collapse" ist. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.borderImage = "url(border.png) 30 round"

Syntax

border-image: source slice width outset repeat | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-image-slice</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Hier ist das Originalbild verwendet:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Hier ist ein weiteres Beispiel mit unterschiedlichen Werten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 30%;
      border-image-repeat: repeat;
      border-image-width: 15px;
      }
      .border2 {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 20%;
      border-image-repeat: round;
      border-image-width: 10px;
      }
      .border3 {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 15%;
      border-image-repeat: space;
      border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-image mit allen Werten.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Werte

Wert Beschreibung
border-image-source Es definiert das Quellbild, das zum Erstellen von Randbildern verwendet wird. Das kann eine URL, eine Daten-URI, ein CSS-Gradient oder eine Inline-VG sein.
border-image-slice Es definiert, wie das durch border-image-source spezifizierte Bild aufgeteilt wird. Das Bild ist immer in neun Abschnitte unterteilt: vier Ecken, vier Ränder und die Mitte.
border-image-width Es bestimmt die Breite des Randbildes.
border-image-repeat Es definiert, ob das Randbild wiederholt, gerundet oder gedehnt wird.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
16.0+ 12.0+ 15.0+ 6.0+ 11.0+

Übe dein Wissen

Wie kann eine Border-Image mit CSS erstellt werden?
Finden Sie das nützlich?