Cień {box-shadow}
W jaki sposób podstawić efektownie wyglądający cień pod elementem?
CSS 3
- Cień na zewnątrz elementu:
selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... } - Cień wewnątrz elementu:
selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... }
- poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
- pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
- rozmycie - promień efektu rozmycia (opcjonalnie)
- rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie)
- kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.
Aby zupełnie usunąć ustalony wcześniej cień, należy podać
box-shadow: none
[Zobacz także: Wstawianie stylów]Powyższe polecenie pozwala wprowadzić efekt cienia pod dowolnym elementem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.
Przykład {box-shadow}
box-shadow: 5px 5px 10px
box-shadow: inset 5px 5px 10px;
box-shadow: 0 0 20px 10px red
box-shadow: 3px 3px 10px red, yellow -3px 3px 10px, 3px -3px 10px
Pytania i odpowiedzi {box-shadow}
Co robi "box-shadow"?
box-shadow w CSS pozwala dodawać cień do elementu. Można określić przesunięcie cienia poziomo i pionowo, rozmycie, kolor cienia oraz opcjonalnie kierunek i rozmiar cienia. Dzięki temu można uzyskać efekt wypukłości, odcinania elementu od tła lub inny efekt wizualny.
Jak zrobić cień w CSS?
Aby dodać cień do elementu w CSS, można użyć właściwości box-shadow i określić wartości cienia, takie jak przesunięcie poziome, przesunięcie pionowe, rozmycie, kolor itp. Na przykład: "box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);" dodaje cień z przesunięciem 3 piksele poziomo i pionowo, rozmyciem 5 pikseli i kolorystyką szaro-czarną.
Jak zrobić cień z obrazka?
Aby dodać cień do obrazka (<img>) w CSS, można użyć właściwości box-shadow. Przykład: <img src="obraz.jpg" style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5)" alt="Obrazek"> dodaje cień o przesunięciu 5 pikseli poziomo i pionowo, rozmyciu 10 pikseli oraz kolorystyce szaro-czarnej.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
box-shadow: wartość | 10 2011-03-08 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 5.1 2011-07-20 |
box-shadow: inset | 10 2011-03-08 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 5.1 2011-07-20 |