box-shadow
Dodaje cień wokół elementu, na zewnątrz lub do środka.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako lista cieni
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.boxShadow = "0 10px 30px rgba(0,0,0,.4)"
Przykład
#.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 12px 32px -8px rgba(0, 0, 0, 0.6);
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 20px 48px -8px rgba(124, 58, 237, 0.45);
}<div style="padding: 24px;">
<div style="padding: 16px; border-radius: 14px; background: #18181b; transition: box-shadow .2s; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);">Najedź, żeby zobaczyć efekt w swoim projekcie</div>
</div>Definicja i zastosowanie
#Właściwość box-shadow rysuje cień w kształcie ramki elementu, z uwzględnieniem zaokrągleń border-radius. Podajesz przesunięcie w poziomie i w pionie, rozmycie, rozszerzenie oraz kolor.
Słowo inset rysuje cień do środka, co daje efekt wklęsłości. Kilka cieni oddzielonych przecinkami pozwala budować realistyczną głębię: mały ostry cień blisko elementu i duży miękki dalej.
Cień nie zajmuje miejsca w układzie, więc nie przesuwa innych elementów. Dlatego bywa też używany zamiast obramowania, na przykład box-shadow: 0 0 0 2px #a78bfa.
Składnia
#box-shadow: none | inset? <przesunięcie-x> <przesunięcie-y> <rozmycie>? <rozszerzenie>? <kolor>? [, …]*;Wartości
#- Element bez cienia.
- Miękki cień pod elementem, jak przy uniesionej karcie.
obwódka
Cień bez rozmycia z rozszerzeniem działa jak obramowanie.inset 0 4px 12px rgba(0,0,0,.8)
inset
Cień do środka, element wygląda na wklęsły.poświata
Kolorowa poświata wokół elementu.
Wartości w praktyce
#none
.demo { box-shadow: none; }0 10px 30px rgba(0,0,0,.6)
.demo { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }0 0 0 3px #a78bfa
.demo { box-shadow: 0 0 0 3px #a78bfa; }inset 0 4px 12px rgba(0,0,0,.8)
.demo { box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.8); }0 0 24px #7c3aed
.demo { box-shadow: 0 0 24px #7c3aed; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Warstwy cieni wyglądają naturalniej niż jeden mocny cień. Połącz mały i duży, miękki.
- Na ciemnym tle cień jest mało widoczny. Lepiej sprawdza się jaśniejsza powierzchnia karty albo delikatna poświata.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.