Własność CSS border-image-slice

Własność border-image-slice dzieli obraz ustawiony w tle obramowania elementu HTML na 9 obszarów odpowiadających czterem narożnikom, czterem krawędziom i środkowi.

Każdy z uzyskanych w ten sposób wycinków obrazu tła zostaje użyty w odpowiednim obszarze tła obramowania elementu. Poniższy rysunek przedstawia obraz o wymiarach 87 × 87 pikseli.

Każda gwiazdka zajmuje kwadrat o boku 29 pikseli. Jeśli więc własności border-image-slice nadamy wartość 29, to podzieli ona ten obraz na wycinki za pomocą czterech cięć, każde równoległe do jednej krawędzi obramowania, w odległości 29 pikseli od odpowiednich krawędzi, jak widać poniżej.

Obraz został podzielony na dziewięć części. Cztery części narożne – biała, czerwona, jasnozielona i ciemnozielona – zostaną umieszczone w narożnikach wybranego elementu.

Cztery części „krawędziowe” – różowa, ciemnofioletowa, „średniozielona” i jasnoróżowa – zostaną użyte odpowiednio w górnej, prawej, dolnej i lewej krawędzi elementu.

Dziewiąta część, środkowa, zostanie użyta jako tło elementu, jeśli dodatkowo przypiszemy własności border-image-slice słowo kluczowe fill.

Przykłady

W tym przykładzie został użyty powyższy obraz z kolorowymi gwiazdkami. Zwróć uwagę na rozmieszczenie gwiazdek o różnych kolorach w poszczególnych obszarach tła krawędzi elementu.

div {
  border-image-source: url("stars.png");
  border-image-slice: 29;
  border-image-repeat: round;
  padding: 30px;
}
...
<div></div>

Efekt:

Składnia i wartości

Własność border-image-slice jako wartość przyjmuje od jednej do czterech liczb bez jednostki lub wartości procentowych, które określają sposób podziału obrazu na wycinki. Wartości ujemne są niedozwolone.

Dodatkowo opcjonalnie można użyć słowa kluczowego fill, które może być umieszczone w dowolnym miejscu deklaracji i które powoduje wypełnienie tła elementu środkowym wycinkiem obrazu tła obramowania.

W przypadku wartości liczbowych

• Jedna wartość: wszystkie cztery linie cięcia zostają ustawione w tej samej odległości od odpowiednich krawędzi obrazu.
• Dwie wartości: pierwsza określa odległość poziomych (górnej i dolnej) linii cięcia, a druga – pionowych (lewej i prawej) linii cięcia.
• Trzy wartości: pierwsza określa położenie linii cięcia równoległej do górnej krawędzi obrazu, druga wartość określa położenie linii cięcia równoległych do lewej i prawej krawędzi obrazu, a trzecia określa położenie linii cięcia równoległej do dolnej krawędzi obrazu.
• Cztery wartości: określają po kolei położenie górnej, prawej, dolnej i lewej linii cięcia.

Liczby bez jednostki

Liczby bez jednostki są interpretowane jako wartości wielkości wyrażone w pikselach w przypadku obrazów rastrowych (np. PNG, JPG) lub jako współrzędne w przypadku obrazów wektorowych i wówczas odnoszą się do rozmiaru elementu, a nie obrazu.

Wartości procentowe

Wartości procentowe odnoszą się do rozmiaru obrazu – do szerokości w przypadku poziomych linii cięcia i do wysokości w przypadku pionowych linii cięcia.

Zastosowanie

Własność border-image-slice 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-slice odnosi się także do pseudoelementu ::first-letter.

Podsumowanie