CSS-Eigenschaft border-image-outset

Die CSS-Eigenschaft border-image-outset legt fest, um wie viel das Randbild über den Rand des Elements hinaus verlängert wird.

Die Eigenschaft border-image-outset nimmt von einem bis vier Ausgangswerten an.

  • Wenn ein Wert angegeben wird, werden alle vier Outsets angegeben.
  • Wenn zwei Werte angegeben werden, gibt der erste die obere und untere Ausgangsposition an, und der zweite die rechte und linke Ausgangsposition.
  • Wenn drei Werte angegeben werden, gibt der erste den oberen Anfang an, der zweite den rechten und linken Anfang und der dritte den unteren Anfang.
  • Wenn vier Werte angegeben werden, setzen sie die Ausgangssituationen auf der oberen, rechten, unteren und linken Seite in dieser Reihenfolge.
Anfangswert 0
Gilt für Alle Elemente, mit Ausnahme von internen Tabellenelementen, wenn border-collapse auf "collapse" eingestellt ist. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.borderImageOutset = "20px";

Syntax

border-image-outset: length | number | 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" );
      border-image-slice: 30;
      border-image-repeat: round;
      border-image-outset:10px 0 15px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border-image-outset</h2>
    <p class="border">Hallo Welt!</p>
    <p>Hier ist das Originalbild:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%">
  </body>
</html>

Werte

Wert Beschreibung
length Es gibt an, in welchem Abstand von den Rändern das Randbild erscheint. Der Standardwert ist 0.
number Die Größe des Randbildes beginnt als Vielfaches der entsprechenden Randbreiten des Elements.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

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

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'border-image-outset'?
Finden Sie das nützlich?