Opis

border-image-slice określa pocięcie obrazu dla border-image. Istnieją 4 sposoby określania cięć:

  • 1 wartość: wszystkie równo (G+P+D+L)
  • 2 wartości: G+D, P+L
  • 3 wartości: G, P+L, D
  • 4 wartości: G, P, D, L

Obraz zostanie pocięty na dziewięć części: cztery narożniki (każdy z nich jest użyty jednorazowo, w narożnikach), cztery obszary po brzegach (te są powtarzane, skalowane lub w inny sposób modyfikowane w celu dopasowania do wymiarów elementu) i środek (domyślnie drzucany, przezroczysty, chyba że ustawiono słowo kluczowe fill).

Właściwości border-image-repeat, border-image-width i border-image-outset określają, w jaki sposób te regiony są używane do utworzenia końcowego obrazu obramowania.

Zobacz wszystkie własności border-image

Przykład
obraz ma 107x117px
Kod:
Wartości

border-image-slice: number|%|fill|initial|inherit;

WartośćOpis
number
20 | 40 20 		Reprezentuje przesunięcie krawędzi w pikselach dla obrazów rastrowych i współrzędne dla obrazów wektorowych. W przypadku obrazów wektorowych liczba jest zależna od wielkości elementu, a nie od wielkości obrazu źródłowego, dlatego w takich przypadkach zwykle preferowane są wartości procentowe.
%
45% | 50% 		Reprezentuje przesunięcie krawędzi (i cięcie) jako procent wielkości obrazu źródłowego: szerokość obrazu dla przesunięć poziomych, wysokość dla przesunięć pionowych.
fill
45% fill | 0 fill 		Powoduje wyświetlanie środkowej części obrazu (normalnie traktowaną jako przezroczystą).
initial Ustawia tę właściwość na wartość domyślną.
inherit Dziedziczy tę właściwość po elemencie nadrzędnym.
Przykłady: 0 50%  |   100% 40%  |   50% fill   |   33% fill   |   0 10 0  |  
Info: Domyślna wartość: 100%
Dziedziczenie:
Animowalność:
JavaScript: object.style.borderImageSlice