Selektory css - Cienie

Polecenie umożliwia dodanie cienia do tekstu. Należy podać cztery obowiązkowe wartości.:
- poziom przesunięcie cienia w poziomie, dodatnia wartość przesuwa w prawo, a ujemna w lewo;
- pion przesunięcie cienia w pionie, dodatnia wartość przesuwa w dół, a ujemna w górę
- rozmycie wartość rozmycia cienia
- color: kolor cienia
Wartość: none | długość | kolor | inherit
Wartość początkowa: none
Używany tylko z tekstem
Dziedziczenie: nie
Do definiowania koloru najlepiej jest użyć notacji RGBA - dzięki kanałowi alfa, wszystko co znajdzie się pod cieniem, będzie przezroczyste;
Może określać więcej cieni dla danego tekstu, wystarczy że kolejne wartości, opisujące jeden rodzaj cienia, oddzielimy od siebie przecinkiem.
Przykłady:

Zapis	Wygląd
`p {text-shadow: 2px 2px #F45A69;}`	Wersja skrócona bez rozmycia
`p {text-shadow: -2px -2px #F45A69;}`	Wersja skrócona bez rozmycia (-)
`p {text-shadow: 2px 2px 4px #F45A69;}`	Wersja z rozmyciem
`p {text-shadow: -2px -2px 4px #F45A69;}`	Wersja z rozmyciem (-)
`p {color: #F45A69; font-size:30px; text-shadow:0 2px 0 white, 0 3px 0 #F45A69, 0 3px 4px #F45A69 }`	Potrójne zastosowanie
`p {text-shadow: rgba(,90,105,0.5) 3px 3px 4px;}`	Wersja z rgba (z kanałem alfa)
`p {text-shadow: rgba(,90,105,0.8) -3px 3px 5px;}`	Wersja z rgba (z kanałem alfa -+)

Polecenie pozwala zdefiniować cień pod pojemnikami HTML. Należy podać cztery obowiązkowe wartości:
- poziom przesunięcie cienia w poziomie, dodatnia wartość przesuwa w prawo, a ujemna w lewo;
- pion przesunięcie cienia w pionie, dodatnia wartość przesuwa w dół, a ujemna w górę
- rozmycie wartość rozmycia cienia
- powiększenie cienia dodatnia wartość powiększa, a ujemna pomniejsza - ta wartość nie jest obowiązkowa
- kolor kolor cienia
- inset gdy jest określa cień wewnątrz elementu
Wartość: none | shadow
Wartość początkowa: none
Używany z: wszystkie elementy
Dziedziczenie: nie
W przykładach pominięta zostaje wersja dla starszych przeglądarek:
- div { box-shadow: 5px 5px 5px 5px rgba(,0,0,0.5) } składnia zgodna ze specyfikacją W3C;
- div { -khtml-box-shadow: 5px 5px 5px 5px rgba(,0,0,0.5) } - Konqueror (Linux)
- div { -moz-box-shadow: 5px 5px 5px 5px rgba(,0,0,0.5) } - Gecko (m.in. Firefox)
- div { -webkit-box-shadow: 5px 5px 5px 5px rgba(,0,0,0.5) } - Webkit (Chrome, Safari)
Przykłady (z kolorem w wersji RGB):

Zapis	Wygląd
`div { box-shadow: 3px 3px #F45A69 }`	1. Odsunięcie w poziomie i pionie + kolor
`div { box-shadow: 3px 3px 3px #F45A69 }`	2. Jak wyżej + rozmycie
`div { box-shadow: 3px 3px 0 3px #F45A69 }`	3. Jak wyżej + rozciągnięcie (nadlewka)
`div { box-shadow: 0 0 6px #F45A69 }`	4. Tylko wielkość rozmycia i kolor
`div { box-shadow: 0 0 3px 3px #F45A69 }`	5. Tylko rozmycie, rozciągnięcie i kolor
`div { box-shadow: inset 3px 3px #F45A69 }`	6. Zastosowanie inset (jak w 1.)
`div { box-shadow: inset 3px 3px 3px #F45A69 }`	7. Jak w 2. + inset
`div { box-shadow: inset 3px 3px 0 3px #F45A69 }`	8. Jak w 3. + inset
`div { box-shadow: inset 0 0 6px #F45A69 }`	9. Jak w 4. + inset
`div { box-shadow: inset 0 0 3px 3px #F45A69 }`	10. Jak w 5. + inset
`div { box-shadow: 0 0 3px 3px #E4A68B, 0 0 10px 10px #B1F54C, -20px 20px #F7BC5B, 20px -20px 0 3px #F45A69 }`	11. Wielokolorowy zewnętrzny
`div { box-shadow: 10px 20px 10px -5px crimson inset, 20px -10px 10px -5px teal inset, -10px -20px 10px -5px olive inset, -20px 10px 10px -5px indigo inset }`	12. Wielokolorowy wewnętrzny
`div { box-shadow: -5px 0 5px red, 0 5px 5px green, 0 -5px 5px blue, 5px 0 5px orange, inset 0 0 5px purple }`	13. Wielokolorowe obramowanie