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 elementu. 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 inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty inset, cień zawrze się wewnątrz elementu. 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.