Własność CSS border-image-repeat określa sposób powielania i skalowania elementów obrazu ustawionego w tle obramowania elementu HTML w obszarach krawędzi obramowania tego elementu.
Przykłady
W tym przykładzie wybrane obszary obrazu ustawionego w tle krawędzi obramowania elementu div
zostaną powielone i odpowiednio przeskalowane, aby zapobiec ich pofragmentowaniu.
div {
border-image: url("stars.png") 29;
border-image-repeat: round;
padding: 30px;
}
...
<div></div>
Efekt:

Składnia i wartości
Własność border-image-repeat
przyjmuje jedno lub dwa z poniższych słów kluczowych.
stretch
– elementy obrazu reprezentujące krawędzie obramowania są rozciągane tak, aby pokryć je w całości, jak widać na poniższej ilustracji.repeat
– elementy obrazu reprezentujące krawędzie obramowania zostają powielone bez żadnego skalowania, w wyniku czego mogą zostać ucięte, jak widać na poniższym zrzucie ekranu.round
– elementy obrazu reprezentujące krawędzie obramowania zostają powielone i mogą zostać odpowiednio przeskalowane, aby nie trzeba było ich ucinać, jak widać na poniższej ilustracji.space
– elementy obrazu reprezentujące krawędzie obramowania zostają powielone i mogą zostać zwiększone odstępy między nimi, aby nie trzeba było ich ucinać, jak widać na poniższej ilustracji.
Jeśli jest podane tylko jedno słowo kluczowe, to odnosi się ono do wszystkich krawędzi i środka.
Jeśli są podane dwa słowa kluczowe, to pierwsze odnosi się do górnej i dolnej części oraz środka, a drugie – do lewej i prawej części oraz środka.
Zastosowanie
Własność border-image-repeat
odnosi się do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli (np. tr
, th
, td
), której własność border-collapse
jest ustawiona na collapse
.
Ponadto własność border-image-repeat
odnosi się także do pseudoelementu ::first-letter
.
Podsumowanie
Zastosowanie | Wszystkie elementy HTML z wyjątkiem wewnętrznych elementów tabeli (np. tr , th , td ), której własność border-collapse jest ustawiona na collapse , oraz pseudoelement ::first-letter |
---|---|
Obsługiwane wartości | Słowa kluczowe stretch , repeat , round i space . |
Wartość początkowa | stretch |
Dziedziczenie | Nie |
Specyfikacja | CSS Backgrounds and Borders Module Level 3 – border-image-repeat |