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 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>
(en-US), 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>
(en-US) 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>
(en-US). 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>
(en-US). 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>
(en-US) 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 (en-US) |
4.0 (2.0) 3.5 (1.9.1)-moz (en-US) |
9.0 (Zobacz notatki) | 10.5 | 5.1 (WebKit 534) 3.0 (WebKit 522)-webkit (en-US) |
Wielokrotne cienie | 10.0 1.0-webkit (en-US) |
4.0 (2.0) 3.5 (1.9.1)-moz (en-US) |
9.0 | 10.5 | 5.1 (WebKit 534) 3.0 (WebKit 522)-webkit (en-US) |
Wartość inset |
10.0 4.0-webkit (en-US) |
4.0 (2.0) 3.5 (1.9.1)-moz (en-US) |
9.0 | 10.5 | 5.1 (WebKit 534) 5.0 (WebKit 533)-webkit (en-US) |
spread-radius |
10.0 4.0-webkit (en-US) |
4.0 (2.0) 3.5 (1.9.1)-moz (en-US) |
9.0 | 10.5 | 5.1 (WebKit 534) 5.0 (WebKit 533)-webkit (en-US) |
Właściwość | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
---|---|---|---|---|
Podstawowa obsługa |
5.0 |
? | Obsługuje | Obsługuje (2.2 tested) -webkit (en-US) |
Wielokrotne cienie | 5.0 (Yes)-webkit (en-US) |
? | ? | ? |
Wartość inset |
5.0 (Yes)-webkit (en-US) |
? | ? | ? |
spread-radius |
5.0 (Yes)-webkit (en-US) |
? | ? | ? |
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
naseparate
.