CSS-Eigenschaft border-image-repeat

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>

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>

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>

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.

Browser-Support

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


Finden Sie das nützlich?

Ähnliche Artikel