Īpašība box-shadow

Īpašība box-shadow iestata ēnu blokam. Kā vērtību īpašība pieņem 6 parametrus, kas uzskaitīti atdalīti ar atstarpēm, vai atslēgvārdu none, kas pilnībā atceļ ēnu.

Sintakse

selektors {
	box-shadow: inset nobīde_pa_x nobīde_pa_y izplūde izmērs_ēnas krāsa;
}

selektors {
	box-shadow: none;
}

Parametri

Parametrs	Apraksts
`inset`	Neobligāts parametrs. Ja tas ir norādīts, ēna atradīsies kontejera iekšpusē, ja nav norādīts - tad ārpusē.
nobīde pa x	Nosaka ēnas nobīdi pa X asi. Pozitīva vērtība nobīda pa labi, negatīva - pa kreisi.
nobīde pa y	Nosaka ēnas nobīdi pa Y asi. Pozitīva vērtība nobīda uz leju, negatīva - uz augšu.
izplūde	Nosaka ēnas izplūdi. Jo lielāka vērtība - jo izplūdīgāka būs ēna. Neobligāts parametrs. Ja nav norādīts - ēna būs skaidri norobežota.
izmērs ēnas	Nosaka ēnas izmēru. Pozitīva vērtīra izstiepj ēnu, negatīva, pretēji, to saspiež. Neobligāts parametrs. Ja nav norādīts - ēna būs tāda paša izmēra kā elements.
krāsa	Nosaka ēnas krāsu jebkurās krāsas mērvienībās. Neobligāts parametrs. Ja nav norādīts - ēnas krāsa sakrīt ar teksta krāsu.

Nobīdes pa asīm, izplūde un ēnas izmērs tiek norādīti jebkurās izmēru mērvienībās, izņemot procentus.

Piemērs

Šajā piemērā ēna ir nobīdīta uz leju un pa labi un pievienota neliela izplūde:

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

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

Piemērs . Skaidri norobežota ēna

Šajā piemērā ēna ir nobīdīta uz leju un pa labi, bet izplūdes nav (ēna būs skaidri norobežota):

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

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

Piemērs . Vienmērīga ēna

Šajā piemērā ēna nav nobīdīta, bet tai ir pievienota izplūde:

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

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

Piemērs . Ēnas izmērs

Šajā piemērā ēna nav nobīdīta, izplūde ir nulle, bet tai ir pievienots izmērs (melnais - ir robeža, sarkanā - ir ēna):

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

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

Piemērs . Izplūde + ēnas izmērs

Šajā piemērā ēna nav nobīdīta, bet tai ir pievienota izplūde un izmērs (melnais - ir robeža, sarkanā - ir ēna):

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

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

Piemērs . Iekšējā ēna

Šajā piemērā ēna atrodas kontejera iekšpusē:

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

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

Skatiet arī

īpašība text-shadow,
kas iestata ēnu tekstam