Właściwość box-shadow

Właściwość box-shadow ustawia cień blokowi. Jako wartość właściwość przyjmuje 6 parametrów, wymienianych przez spację, albo słowo kluczowe none, które całkowicie usuwa cień.

Składnia

selektor {
	box-shadow: inset przesunięcie_x przesunięcie_y rozmycie rozmiar_cienia kolor;
}

selektor {
	box-shadow: none;
}

Parametry

Parametr	Opis
`inset`	Parametr opcjonalny. Jeśli jest podany, to cień będzie wewnątrz kontenera, jeśli nie jest podany - to na zewnątrz.
przesunięcie po x	Ustawia przesunięcie cienia wzdłuż osi X. Wartość dodatnia przesuwa w prawo, ujemna - w lewo.
przesunięcie po y	Ustawia przesunięcie cienia wzdłuż osi Y. Wartość dodatnia przesuwa w dół, ujemna - w górę.
rozmycie	Ustawia rozmycie cienia. Im większa wartość - tym bardziej rozmyty będzie cień. Parametr opcjonalny. Jeśli nie jest podany - cień będzie ostry.
rozmiar cienia	Ustawia rozmiar cienia. Wartość dodatnia rozciąga cień, wartość ujemna, przeciwnie, ściska go. Parametr opcjonalny. Jeśli nie jest podany - cień będzie takiego samego rozmiaru, jak element.
kolor	Ustawia kolor cienia w dowolnych jednostkach koloru. Parametr opcjonalny. Jeśli nie jest podany - kolor cienia jest taki sam jak kolor tekstu.

Przesunięcia wzdłuż osi, rozmycie i rozmiar cienia ustawia się w dowolnych jednostkach rozmiaru, z wyjątkiem procentów.

Przykład

W tym przykładzie cień jest przesunięty w dół i w prawo i dodano lekkie rozmycie:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Przykład . Ostry cień

W tym przykładzie cień jest przesunięty w dół i w prawo, ale nie ma rozmycia (cień będzie ostry):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Przykład . Jednolity cień

W tym przykładzie cień nie jest przesunięty, ale dodano do niego rozmycie:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Przykład . Rozmiar cienia

W tym przykładzie cień nie jest przesunięty, rozmycie wynosi zero, ale dodano do niego rozmiar (czarne to obramowanie, czerwone - to cień):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Przykład . Rozmycie + rozmiar cienia

W tym przykładzie cień nie jest przesunięty, ale dodano do niego rozmycie i rozmiar (czarne - to obramowanie, czerwone - to cień):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Przykład . Wewnętrzny cień

W tym przykładzie cień znajduje się wewnątrz kontenera:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Zobacz też

właściwość text-shadow,
która ustawia cień tekstowi