box-shadow

Właściwość CSS box-shadow określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę. Pozwala na rzucenie cienia z prawie każdego elemntu. Jeśli -moz-border-radius jest zadeklarowany na elemencie na którym zadeklarowany jest także box-shadow, właściwość przybiera wartość z -moz-border-radius i tworzy zaokrąglony cień. Użycie box-shadow wraz z z-index daje taki sam efekt jak wielokrotne użycie cienia tekstu (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).

• Wartość początkowa: Szczegóły widoczne poniżej.
• Dotyczy: Każdy element.
• Dziedziczona: Nie.
• @media: Wizualna.
• Wartość wyliczona: Każda długość absolutna; każdy kolor; inaczej jak zapisano poniżej.
• Animowana: Tak, jako lista cieni.
• Porządek kanoniczny: Unikatowy niedwuznaczny porządek określany według formalnej gramatyki. 

Składnia

box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

Wartości

inset

Jeśli nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty inset, cień zmieni się w jeden wewnętrzny. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.

<offset-x> <offset-y>

Są dwie wartości <length>, które określają odległość. <offset-x> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <offset-y> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz <length> dla możliwych jednostek.
Jeśli obydwie wartości przyjmują 0, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <blur-radius> oraz/lub <spread-radius> jest określony).

<blur-radius>

To jest trzecia wartość <length>. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną 0 (krawędź cienia jest ostra).

<spread-radius>

To jest czwarta wartość <length>. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość 0 (cień będzie tego samego rozmiaru co element).

<color>

Zobacz <color> dla możliwych słów kluczowych oraz notacji.
Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość color, lecz Safari tworzy przeźroczysty cień w tej sytuacji.

Przykłady

• Test box-shadow
• Kurs oraz przykłady box-shadow

box-shadow: 60px -16px teal;

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

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: inset 5em 1em gold;

box-shadow: 0 0 1em gold;

box-shadow: inset 0 0 1em gold;

box-shadow: inset 0 0 1em gold, 0 0 1em red;

Specyfikacja

Zgodność z przeglądarkami

Notatki

• Od wersji 5.5, Internet Explorer obsługuje Microsoft's DropShadow i filtr Shadow. Możesz użyć tych rozszerzeń aby stworzyć cień (chociaż składnia oraz efekt różnią się od CSS3).
• Cienie mają wpły na układ w starszych silnikach Gecko, Presto i WebKit; np. jeśli utworzomy zewnętrzny cień to przy elemencie z width: 100% zobaczysz pasek przewijania.
• W Gecko 13 (Firefox 13) zostało usunięte wsparcie dla -moz-box-shadow. Od tego czasu, tylko wersja bez -moz- jest wspierana.
• Aby uzyskać efekt box-shadow w IE9 lub późniejszych, musisz ustawić border-collapse na separate.