border-image-repeat CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2016 browserübergreifend verfügbar.
Die border-image-repeat CSS Eigenschaft definiert, wie die Bilder für die Seiten und den mittleren Teil des Randbildes skaliert und gekachelt werden. Der mittlere Bereich kann durch die Verwendung des Schlüsselworts "fill" in der border-image-slice Eigenschaft angezeigt werden.
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 border-image-repeat Eigenschaft kann mittels eines oder zweier Werte spezifiziert werden, die aus der untenstehenden Werteliste ausgewählt werden.
- Wenn ein Wert angegeben wird, gilt er für alle vier Seiten gleich.
- Wenn zwei Werte angegeben werden, gilt der erste für oben, Mitte und unten, der zweite für links und rechts.
Werte
stretch-
Die Randbereiche des Quellbildes werden gedehnt, um den Abstand zwischen jedem Rand zu füllen.
repeat-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand zu füllen. Kacheln können zugeschnitten werden, um die richtige Passform zu erreichen.
round-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand zu füllen. Kacheln können gedehnt werden, um die richtige Passform zu erreichen.
space-
Die Randbereiche des Quellbildes werden gekachelt (wiederholt), um den Abstand zwischen jedem Rand zu füllen. Extra Platz 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 Randbilder
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
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-repeat |