Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break
| Dane w pigułce | |
| Zastosowanie | Określa wycinek brzegu wchodzący do obramowania |
| Dziedziczenie | nie |
| Wartości | liczba |
| Wartość domyślna | brak |
| Przykład | border-image-slice: 27 |
| Składnia JavaScript | object.style.borderImageSlice="27" |
Aby zdefiniować sposób powtarzania, należy wpisać w definicji stylu border-image-slice: liczba;
Stylu tego w kanonicznej postaci W3C nie obsługuje poprawnie żadna przeglądarka - trzy przeglądarki, Firefox, Chrome i Opera, posługują się zmodyfikowaną wersją i konieczne jest użycie prefiksów -moz-, -webkit- i -o-, np.:
border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
Obrazek ma rozmiary 81x81 pikseli i dzieli się na 9 części, każda 27x27 pikseli - umownie niech mają numery od 1 do 9, licząc rzędami. Gdy w definicji podamy ... 27 repeat (przyjmujemy tutaj powielanie rombów, a nie ich rozciąganie), obramowania będą miały dopasowane do rombów rozmiary (obszary 2, 4, 6 i 8), zaś środek będzie pusty - pojawi się w nim zawartość ramki. Czerwone linie na ilustracji pokazują wirtualny podział obrazka (ilustracja pochodzi z webowej aplikacji Border Image Generator).
Podziałowi takiemu odpowiada poniższy pojemnik:
Gdybyśmy przyjęli większą wartość niż wymiary rombów, np. ... 35 repeat, widoczne w obramowaniu romby zostaną przycięte (pokazują to czerwone linie, bliżej siebie niż poprzednio, a dalej od brzegów obrazka) i niejako się zleją w obramowaniu.
Gdybyśmy z kolei przyjęli mniejszą wartość niż wymiary rombów, np. ... 20 repeat, widoczne w obramowaniu romby zostaną poszerzone o sąsiadujące fragmenty narożników (pokazują to czerwone linie, dalej od siebie niż poprzednio), które zostaną włączone do obramowania. Ale jednocześnie obcięte zostaną rożki tych rombów (te od strony centrum obrazka), które znajdą się w środkowym obszarze, tam gdzie jest treść.
Oczywiście możemy manipulować wszystkimi wartościami z osobna - widać jednak, że trzeba uważnie dopasowywać do siebie fizyczne rozmiary obrazka i jego fragmentów oraz wartości w definicji obramowania.
Pomijamy w tym miejscu objaśnienie innych parametrów definicji.
Interpretacja: Firefox, Opera, Chrome.
