CSS-Eigenschaft border-image

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.