box-shadow

 

Generator box-shadow

Interaktywne narzędzie pozwalające stworzyć efekt 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

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

Specyfikacja Status Komentarz
CSS Backgrounds and Borders Module Level 3
The definition of 'box-shadow' in that specification.
Candidate Recommendation  

Zgodność z przeglądarkami

Właściwość Chrome Firefox (Gecko) Internet Explorer Opera Safari
Podstawowa obsługa 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (Zobacz notatki) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Wielokrotne cienie 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Wartość inset 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
spread-radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit

 

 

Właściwość iOS Safari Opera Mini Opera Mobile Android Browser
Podstawowa obsługa

5.0
(Yes)-webkit

? Obsługuje Obsługuje (2.2 tested) -webkit
Wielokrotne cienie 5.0
(Yes)-webkit
? ? ?
Wartość inset 5.0
(Yes)-webkit
? ? ?
spread-radius 5.0
(Yes)-webkit
? ? ?

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.

Autorzy i etykiety dokumentu

 Autorzy tej strony: Sebastianz, Prinz_Rana, JJay
 Ostatnia aktualizacja: Sebastianz,