Przejdź do treści

Nawis obramowania obrazkowego {border-image-outset}

Jak wysunąć obramowanie obrazkowe poza krawędzie elementu?

CSS 3

selektor { border-image-outset: nawis }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania).

Możliwe jest przy tym podanie:

  • jednej wartości - określa jednakową szerokość nawisu poza wszystkie krawędzie obramowania
  • dwóch wartości - pierwsza określa szerokość nawisu poza górną i dolną krawędź obramowania, natomiast druga - poza lewą i prawą
  • trzech wartości - pierwsza określa szerokość nawisu poza górną krawędź obramowania, druga - poza lewą i prawą, natomiast trzecia - poza dolną
  • czterech wartości - ustala oddzielne szerokości nawisów poza kolejne krawędzie obramowania: górną, prawą, dolną, lewą

Nawis obramowania obrazkowego to jego część wystająca na zewnątrz poza krawędzie tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu.

Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco:

Nawis wystaje poza krawędzie tradycyjnego obramowania elementu.

Źródło: CSS Backgrounds and Borders Module Level 3

Przykład {border-image-outset}

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-outset: 7px; border-width: 15px
Połączenie szerokości obramowania i nawisu tylko częściowo wystającego poza jego krawędzie.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px; border-image-outset: 15px
Jeżeli element nie posiada tradycyjnego obramowania, nawis będzie wystawał poza krawędzie samego elementu.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px
Dla porównania to samo, ale bez nawisu.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari		Poziom wsparcia
min. 2,5 roku
border-image-outset: wartość15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25		 100%

Komentarze #

Zobacz więcej komentarzy

Facebook