border-image-repeat
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2016.
Die border-image-repeat CSS Eigenschaft definiert, wie die Bilder für die Seiten und den mittleren Teil des Rahmenbildes skaliert und gekachelt werden. Der mittlere Bereich kann angezeigt werden, indem das Schlüsselwort "fill" in der border-image-slice Eigenschaft verwendet wird.
Probieren Sie es aus
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Syntax
/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* top and bottom | left and right */
border-image-repeat: round stretch;
/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;
Die Eigenschaft border-image-repeat kann mit einem oder zwei Werten aus der unten stehenden Liste angegeben werden.
- Wenn ein Wert angegeben wird, gilt das gleiche Verhalten auf allen vier Seiten.
- Wenn zwei Werte angegeben werden, wird der erste für oben, Mitte und unten und der zweite für links und rechts angewendet.
Werte
stretch-
Die Kantenregionen des Quellbildes werden gedehnt, um den Abstand zwischen den jeweiligen Rändern zu füllen.
repeat-
Die Kantenregionen des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rändern zu füllen. Kacheln können abgeschnitten werden, um die richtige Passform zu erreichen.
round-
Die Kantenregionen des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rändern zu füllen. Kacheln können gedehnt werden, um die richtige Passform zu erreichen.
space-
Die Kantenregionen des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen den jeweiligen Rändern zu füllen. Zusätzlicher Raum wird zwischen den Kacheln verteilt, um die richtige Passform zu erreichen.
Formale Definition
| Anfangswert | stretch |
|---|---|
| Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
border-image-repeat =
[ stretch | repeat | round | space ]{1,2}
Beispiele
Wiederholende Rahmenbilder
CSS
#bordered {
width: 12rem;
margin-bottom: 1rem;
padding: 1rem;
border: 40px solid;
border-image: url("border.png") 27;
border-image-repeat: stretch; /* Can be changed in the live sample */
}
Ergebnisse
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-repeat |