Własność CSS border-image-repeat

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