Używany do rzucania cieni (często nazywanych „cieniami”, jak w Photoshopie) z elementów. Oto przykład z najgłębszą możliwą obsługą przeglądarek:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )To jest:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Poziome przesunięcie (wymagane) cienia, dodatnie oznacza, że cień będzie po prawej stronie pudełka, a ujemne przesunięcie spowoduje umieszczenie cienia po lewej stronie pudełka.
- Pionowe przesunięcie cienia (wymagane), ujemne oznacza, że cień pudełka będzie nad prostokątem, a dodatnie oznacza, że cień będzie poniżej pudełka.
- Promień rozmycia (wymagany), jeśli ustawiony na 0 cień będzie ostry, im wyższa liczba, tym bardziej będzie rozmazany i im dalej będzie się rozciągał cień. Na przykład cień z przesunięciem w poziomie 5 pikseli, który ma również promień rozmycia wynoszący 5 pikseli, będzie stanowił 10 pikseli całkowitego cienia.
- Promień rozprzestrzeniania (opcjonalnie), wartości dodatnie zwiększają rozmiar cienia, wartości ujemne zmniejszają rozmiar. Wartość domyślna to 0 (cień ma taki sam rozmiar jak rozmycie).
- Kolor (wymagany) - przyjmuje dowolną wartość koloru, np. Hex, named, rgba czy hsla. Jeśli wartość koloru zostanie pominięta, cienie ramki są rysowane w kolorze pierwszego planu (tekstu
color). Należy jednak pamiętać, że starsze przeglądarki WebKit (starsze niż Chrome 20 i Safari 6) ignorują regułę, gdy pominięty jest kolor.
Używanie półprzezroczystego koloru rgba(0, 0, 0, 0.4)jest najbardziej powszechne i daje przyjemny efekt, ponieważ nie zakrywa całkowicie / nieprzejrzysto tego, co jest po nim, ale pozwala trochę przejrzeć to, co znajduje się pod spodem, jak prawdziwy cień.
Przykład
Wewnętrzny cień
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Przykład
Internet Explorer (8 i nowsze) Box Shadow
Potrzebujesz dodatkowego elementu, ale jest to możliwe filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Tylko jednostronne
Używając ujemnego promienia rozprzestrzeniania się, możesz wycisnąć cień pudełka i wypchnąć go tylko z jednej krawędzi pudełka.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Wiele granic i nie tylko
Możesz dowolną liczbę razy dodawać cienie do pól. Na przykład pokazuje to dwa cienie o różnych pozycjach i różnych kolorach tego samego elementu:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Przykład pokazuje, jak możesz użyć tego do tworzenia wielu granic:
Zobacz Pen Multiple box-shadow coolness! autor: Chris Coyier (@chriscoyier) na CodePen.
Stosując cienie do pseudoelementów, którymi następnie manipulujesz, możesz uzyskać całkiem fantazyjne cienie pudełkowe w 3D:
Zobacz efekty cienia w pudełku CSS3 pióra autorstwa Halila İbrahim Nuroğlu (@haibnu) na CodePen.
Super gładkie cienie za pomocą wielu wartości oddzielonych przecinkami:
Zobacz
gładki box-shadow Pen autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.
Wsparcie przeglądarki
Zobacz fragment u góry strony, aby uzyskać szczegółowe informacje na temat zakresu prefiksów dostawców. Jest to jedna z tych właściwości, w których porzucenie przedrostków jest w tym momencie całkiem rozsądne.