CSS-Eigenschaft border-image-repeat

❮ Vorige Nächste ❯

Die CSS-Eigenschaft border-image-repeat wird verwendet, um festzulegen, ob border-image gerundet, wiederholt oder gedehnt wird.

Die Eigenschaft border-image-repeat kann mit einem oder zwei Werten angegeben werden. Wenn ein Wert angegeben wird, gilt das gleiche Verhalten auf allen vier Seiten. Wenn zwei Werte angegeben werden, gilt der erste für oben und unten, der zweite für links und rechts.

Anfangswert	stretch
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.borderImageRepeat = "round";

Syntax

border-image-repeat: stretch | repeat | round | initial | inherit;

Beispiel

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

Versuch es selber!

Lassen Sie uns ein Beispiel mit "round" und "repeat" Werten sehen, um den Unterschied zwischen ihnen zu sehen.

Beispiel

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

Versuch es selber!

Ein anderes Beispiel mit den Werten "space" und "stretched".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: space;
      border-image-width: 10px;
      }
      .border2 {
      border: 10px solid transparent;
      padding: 20px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice:100;
      border-image-repeat: stretch;
      border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschafr border-image-repeat</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Hier ist ein Originalbild verwendet:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
stretch	Jede Lücke zwischen den einzelnen Rändern wird mit gestreckten Bildern gefüllt. Dies ist der Standardwert.
repeat	Jede Lücke zwischen den einzelnen Rändern wird mit wiederholten Bildern gefüllt. Um eine korrekte Passform zu erreichen, können Wiederholungen abgeschnitten werden.
round	Jede Lücke zwischen den einzelnen Rändern wird mit wiederholten Bildern gefüllt. Um eine korrekte Passform zu erreichen, können Wiederholungen gedehnt werden.
space	Jede Lücke zwischen den einzelnen Rändern wird mit wiederholten Bildern gefüllt. Um eine optimale Passform zu erreichen, wird ein zusätzlicher Raum zwischen den Wiederholungen verteilt.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.