Proprietatea box-shadow

Proprietatea box-shadow setează umra unui bloc. Ca valoare, proprietatea acceptă 6 parametri, enumerați prin spațiu, sau cuvântul cheie none, care anulează complet umbra.

Sintaxă

selector {
	box-shadow: inset deplasare_pe_x deplasare_pe_y estompare dimensiune_umbra culoare;
}

selector {
	box-shadow: none;
}

Parametri

Parametru	Descriere
`inset`	Parametru opțional. Dacă este setat, umbra va fi în interiorul containerului, dacă nu este setat - va fi în exterior.
deplasare pe x	Setează deplasarea umbrei pe axa X. O valoare pozitivă deplasează spre dreapta, una negativă - spre stânga.
deplasare pe y	Setează deplasarea umbrei pe axa Y. O valoare pozitivă deplasează în jos, una negativă - în sus.
estompare	Setează estomparea umbrei. Cu cât valoarea este mai mare - cu atât umbra va fi mai estompată. Parametru opțional. Dacă nu este setat - umbra va fi clară.
dimensiune umbră	Setează dimensiunea umbrei. O valoare pozitivă întinde umbra, una negativă, dimpotrivă, o comprimă. Parametru opțional. Dacă nu este setat - umbra va avea aceeași dimensiune ca și elementul.
culoare	Setează culoarea umbrei în orice unitate de culoare. Parametru opțional. Dacă nu este setat - culoarea umbrei coincide cu culoarea textului.

Deplasările pe axe, estomparea și dimensiunea umbrei sunt setate în orice unitate pentru dimensiuni, cu excepția procentelor.

Exemplu

În acest exemplu, umbra este deplasată în jos și spre dreapta și se adaugă o mică estompare:

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

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

Exemplu . Umbră clară

În acest exemplu, umbra este deplasată în jos și spre dreapta, dar nu există estompare (umbra va fi clară):

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

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

Exemplu . Umbră uniformă

În acest exemplu, umbra nu este deplasată, dar i se adaugă estompare:

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

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

Exemplu . Dimensiunea umbrei

În acest exemplu, umbra nu este deplasată, estomparea este zero, dar i se adaugă dimensiune (negru este bordura, roșu este umbra):

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

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

Exemplu . Estompare + dimensiune umbră

În acest exemplu, umbra nu este deplasată, dar i se adaugă estompare și dimensiune (negru este bordura, roșu este umbra):

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

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

Exemplu . Umbră interioară

În acest exemplu, umbra se află în interiorul containerului:

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

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

Vezi și

proprietatea text-shadow,
care setează umbra textului