Obramowanie

Cień

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

Cień na zewnątrz elementu:

selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... }

Cień wewnątrz elementu:

selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... }

Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane):

poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
rozmycie - promień efektu rozmycia (opcjonalnie)
rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie)
kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)

Wartości "poziom", "pion", "rozmycie" oraz "rozprzestrzenienie" należy podać, używając jednostek długości.

Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.

Aby zupełnie usunąć ustalony wcześniej cień, należy podać box-shadow: none [Zobacz także: Wstawianie stylów]

Powyższe polecenie pozwala wprowadzić efekt cienia pod dowolnym elementem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.

Przykład:

box-shadow: 5px 5px 10px

box-shadow: inset 5px 5px 10px;

box-shadow: 0 0 20px 10px red

box-shadow: 3px 3px 10px red, yellow -3px 3px 10px, 3px -3px 10px