MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

 

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 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

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: Saganowsky, Sebastianz, Prinz_Rana, JJay
 Ostatnia aktualizacja: Saganowsky,