Savybė box-shadow

Savybė box-shadow nustato šešėlį blokui. Kaip reikšmę savybė priima 6 parametrus, išvardintus per tarpą, arba raktažodį none, kuris visiškai panaikina šešėlį.

Sintaksė

selektorius {
	box-shadow: inset poslinkis_x_kryptimi poslinkis_y_kryptymi išsiliejimas šešėlio_dydis spalva;
}

selektorius {
	box-shadow: none;
}

Parametrai

Parametras	Aprašas
`inset`	Neprivalomas parametras. Jei jis nurodytas, šešėlis bus konteinerio viduje, jei nenurodytas - išorėje.
poslinkis x kryptimi	Nustato šešėlio poslinkį X ašyje. Teigiama reikšmė pastumia į dešinę, neigiama - į kairę.
poslinkis y kryptimi	Nustato šešėlio poslinkį Y ašyje. Teigiama reikšmė pastumia žemyn, neigiama - aukštyn.
išsiliejimas	Nustato šešėlio išsiliejimą. Kuo didesnė reikšmė - tuo labiau išsilietęs bus šešėlis. Neprivalomas parametras. Jei nenurodytas - šešėlis bus ryškus.
šešėlio dydis	Nustato šešėlio dydį. Teigiama reikšmė ištempia šešėlį, neigiama, priešingai, jį suspaudžia. Neprivalomas parametras. Jei nenurodytas - šešėlis bus tokio pat dydžio kaip ir elementas.
spalva	Nustato šešėlio spalvą bet kokiame spalvų vienetų formate. Neprivalomas parametras. Jei nenurodytas - šešėlio spalva sutampa su teksto spalva.

Poslinkiai išilgai ašių, išsiliejimas ir šešėlio dydis nurodomi bet kokiame dydžio vienetų formate, išskyrus procentus.

Pavyzdys

Šiame pavyzdyje šešėlis pastumtas žemyn ir į dešinę ir pridėtas nedidelis išsiliejimas:

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

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

Pavyzdys . Ryškus šešėlis

Šiame pavyzdyje šešėlis pastumtas žemyn ir į dešinę, bet išsiliejimo nėra (šešėlis bus ryškus):

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

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

Pavyzdys . Tolygus šešėlis

Šiame pavyzdyje šešėlis nepastumtas, bet prie jo pridėtas išsiliejimas:

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

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

Pavyzdys . Šešėlio dydis

Šiame pavyzdyje šešėlis nepastumtas, išsiliejimas lygus nuliui, bet prie jo pridėtas dydis (juoda - tai rėmelis, raudona - tai šešėlis):

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

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

Pavyzdys . Išsiliejimas + šešėlio dydis

Šiame pavyzdyje šešėlis nepastumtas, bet prie jo pridėti išsiliejimas ir dydis (juoda - tai rėmelis, raudona - tai šešėlis):

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

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

Pavyzdys . Vidinis šešėlis

Šiame pavyzdyje šešėlis yra konteinerio viduje:

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

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

Taip pat žiūrėkite

savybė text-shadow,
kuri nustato šešėlį tekstui