Atribuut box-shadow

Atribuut box-shadow määrab plokile varju. Väärtusena võtab atribuut 6 parameetrit, loetletud tühikuga eraldatuna, või võtmesõna none, mis keelab varju täielikult.

Süntaks

selektor {
	box-shadow: inset nihe_x_suunas nihe_y_suunas hägustamine varju_suurus varju_värv;
}

selektor {
	box-shadow: none;
}

Parameetrid

Parameeter	Kirjeldus
`inset`	Valikuline parameeter. Kui see on määratud, on vari konteineri sees, kui pole määratud - siis väljaspool.
nihe x suunas	Määrab varju nihke X-telje suunas. Positiivne väärtus nihutab paremale, negatiivne - vasakule.
nihe y suunas	Määrab varju nihke Y-telje suunas. Positiivne väärtus nihutab alla, negatiivne - üles.
hägustamine	Määrab varju hägustamise. Mida suurem on väärtus, seda hägusem on vari. Valikuline parameeter. Kui pole määratud - on vari terav.
varju suurus	Määrab varju suuruse. Positiivne väärtus venitab varju, negatiivne väärtus, vastupidi, surub selle kokku. Valikuline parameeter. Kui pole määratud - on varju sama suur kui element.
värv	Määrab varju värvi mis tahes värviühikutes. Valikuline parameeter. Kui pole määratud - on varju värv sama mis teksti värv.

Nihked telgede suunas, hägustamine ja varju suurus määratakse mis tahes mõõtühikutes, välja arvatud protsentides.

Näide

Selles näites on vari nihutatud alla ja paremale ning on lisatud väike hägustus:

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

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

Näide . Terav vari

Selles näites on vari nihutatud alla ja paremale, kuid hägustust pole (vari on terav):

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

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

Näide . Ühtlane vari

Selles näites pole vari nihutatud, kuid sellele on lisatud hägustus:

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

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

Näide . Varju suurus

Selles näites pole vari nihutatud, hägustus on null, kuid sellele on lisatud suurus (must on piir, punane on vari):

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

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

Näide . Hägustus + varju suurus

Selles näites pole vari nihutatud, kuid sellele on lisatud hägustus ja suurus (must on piir, punane on vari):

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

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

Näide . Sisemine vari

Selles näites asub vari konteineri sees:

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

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

Vaata ka

atribuut text-shadow,
mis määrab teksti varju