Vlastnost box-shadow

Vlastnost box-shadow nastavuje stín bloku. Jako hodnota přijímá vlastnost 6 parametrů, uvedených mezerou, nebo klíčové slovo none, které stín úplně zruší.

Syntaxe

selektor {
	box-shadow: inset posunuti_po_x posunuti_po_y rozostreni velikost_stinu barva;
}

selektor {
	box-shadow: none;
}

Parametry

Parametr	Popis
`inset`	Nepovinný parametr. Pokud je zadán, stín bude uvnitř kontejneru, pokud není zadán - bude vně.
posunuti po x	Nastavuje posunutí stínu podél osy X. Kladná hodnota posouvá doprava, záporná - doleva.
posunuti po y	Nastavuje posunutí stínu podél osy Y. Kladná hodnota posouvá dolů, záporná - nahoru.
rozostreni	Nastavuje rozostření stínu. Čím větší hodnota - tím více rozostřený stín bude. Nepovinný parametr. Pokud není zadán - stín bude ostrý.
velikost stinu	Nastavuje velikost stínu. Kladná hodnota roztahuje stín, záporná hodnota, naopak, jej stlačuje. Nepovinný parametr. Pokud není zadán - stín bude stejné velikosti jako prvek.
barva	Nastavuje barvu stínu v libovolných jednotkách pro barvu. Nepovinný parametr. Pokud není zadán - barva stínu odpovídá barvě textu.

Posunutí podél os, rozostření a velikost stínu se nastavují v libovolných jednotkách pro velikosti, kromě procent.

Příklad

V tomto příkladu je stín posunut dolů a doprava a přidáno malé rozostření:

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

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

Příklad . Ostrý stín

V tomto příkladu je stín posunut dolů a doprava, ale není rozostřen (stín bude ostrý):

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

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

Příklad . Rovnoměrný stín

V tomto příkladu není stín posunut, ale je k němu přidáno rozostření:

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

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

Příklad . Velikost stínu

V tomto příkladu není stín posunut, rozostření je nulové, ale je k němu přidána velikost (černá - to je ohraničení, červená - to je stín):

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

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

Příklad . Rozostření + velikost stínu

V tomto příkladu není stín posunut, ale je k němu přidáno rozostření a velikost (černá - to je ohraničení, červená - to je stín):

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

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

Příklad . Vnitřní stín

V tomto příkladu je stín uvnitř kontejneru:

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

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

Viz také

vlastnost text-shadow,
která nastavuje stín textu