Svojstvo box-shadow

Svojstvo box-shadow zadaje senku bloku. Kao vrednost svojstvo prima 6 parametara, nabrojanih razmakom, ili ključnu reč none, koja potpuno poništava senku.

Sintaksa

selektor {
	box-shadow: inset pomeraj_po_x pomeraj_po_y zamućenje veličina_senke boja;
}

selektor {
	box-shadow: none;
}

Parametri

Parametar	Opis
`inset`	Opcioni parametar. Ako je naveden, senka će biti unutar kontejnera, ako nije naveden - onda spolja.
pomeraj po x	Određuje pomeranje senke duž X ose. Pozitivna vrednost pomera udesno, negativna - ulevo.
pomeraj po y	Određuje pomeranje senke duž Y ose. Pozitivna vrednost pomera nadole, negativna - nagore.
zamućenje	Određuje zamućenje senke. Što je veća vrednost - senka će biti zamućenija. Opcioni parametar. Ako nije naveden - senka će biti jasna (bez zamućenja).
veličina senke	Određuje veličinu senke. Pozitivna vrednost rasteže senku, negativna, suprotno, sabija je. Opcioni parametar. Ako nije naveden - senka će biti iste veličine kao i element.
boja	Određuje boju senke u bilo kojim jedinicama za boju. Opcioni parametar. Ako nije naveden - boja senke se poklapa sa bojom teksta.

Pomeranja duž osa, zamućenje i veličina senke zadaju se u bilo kojim jedinicama za veličine, osim procentima.

Primer

U ovom primeru senka je pomerena nadole i udesno i dodato je malo zamućenja:

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

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

Primer . Jasna senka

U ovom primeru senka je pomerena nadole i udesno, ali nema zamućenja (senka će biti jasna):

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

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

Primer . Ravnomerna senka

U ovom primeru senka nije pomerena, ali joj je dodato zamućenje:

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

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

Primer . Veličina senke

U ovom primeru senka nije pomerena, zamućenje je jednako nuli, ali joj je dodata veličina (crno - to je granica, crveno - to je senka):

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

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

Primer . Zamućenje + veličina senke

U ovom primeru senka nije pomerena, ali joj je dodato zamućenje i veličina (crno - to je granica, crveno - to je senka):

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

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

Primer . Unutrašnja senka

U ovom primeru senka se nalazi unutar kontejnera:

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

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

Pogledajte takođe

svojstvo text-shadow,
koje zadaje senku tekstu