Vlastnosť box-shadow

Vlastnosť box-shadow nastavuje tieň bloku. Ako hodnota vlastnosť prijíma 6 parametrov, uvedených medzerou, alebo kľúčové slovo none, ktoré tieň úplne zruší.

Syntax

selektor {
	box-shadow: inset posun_po_x posun_po_y rozostrenie velkost_tiene farba;
}

selektor {
	box-shadow: none;
}

Parametre

Parameter	Popis
`inset`	Voliteľný parameter. Ak je zadaný, tieň bude vnútri kontajnera, ak nie je zadaný - tak vonku.
posun po x	Nastavuje posun tieňa po osi X. Kladná hodnota posúva doprava, záporná - doľava.
posun po y	Nastavuje posun tieňa po osi Y. Kladná hodnota posúva nadol, záporná - nahor.
rozostrenie	Nastavuje rozostrenie tieňa. Čím väčšia hodnota - tým rozostrenejšia bude tieň. Voliteľný parameter. Ak nie je zadaný - tieň bude ostrý.
veľkosť tieňa	Nastavuje veľkosť tieňa. Kladná hodnota roztiahne tieň, záporná, naopak, ju stlačí. Voliteľný parameter. Ak nie je zadaný - tieň bude takej istej veľkosti ako prvok.
farba	Nastavuje farbu tieňa v ľubovoľných jednotkách pre farbu. Voliteľný parameter. Ak nie je zadaný - farba tieňa sa zhoduje s farbou textu.

Posuny po osiach, rozostrenie a veľkosť tieňa sa nastavujú v ľubovoľných jednotkách pre veľkosti, okrem percent.

Príklad

V tomto príklade je tieň posunutá nadol a doprava a pridané je malé rozostrenie:

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

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

Príklad . Ostrý tieň

V tomto príklade je tieň posunutá nadol a doprava, ale rozostrenie nie je (tieň bude ostrý):

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

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

Príklad . Rovnomerný tieň

V tomto príklade nie je tieň posunutá, ale je k nej pridané rozostrenie:

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

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

Príklad . Veľkosť tieňa

V tomto príklade nie je tieň posunutá, rozostrenie je nulové, ale je k nej pridaná veľkosť (čierna - to je orámovanie, červená - to je tieň):

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

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

Príklad . Rozostrenie + veľkosť tieňa

V tomto príklade nie je tieň posunutá, ale sú k nej pridané rozostrenie a veľkosť (čierna - to je orámovanie, červená - to je tieň):

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

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

Príklad . Vnútorný tieň

V tomto príklade sa tieň nachádza vnútri kontajnera:

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

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

Pozri tiež

vlastnosť text-shadow,
ktorá nastavuje tieň textu