Definice a použití
Box-shadow umožňuje přidat stín pod prvek a to buď vnitřní stín a nebo vnější.
Box-shadow umožňuje přidat stín pod prvek a to buď vnitřní stín a nebo vnější.
Hodnoty vstupů | Popis |
---|---|
posunX posunY hloubka | stín bude posunut doprava a dolů o zadané posuny; umístěn jakoby "hloubku" pod prvkem |
posunX posunY hloubka barva | stín bude posunut doprava a dolů o zadané posuny; umístěn jakoby "hloubku" pod prvkem s barvou na konci |
inset | změní stín z vnějšího stínu na vnitřní stín |
inherit | zdědí tuto vlastnost od jeho rodičovského elementu |
Čtverec široký 200px a vysoký 200px s černým vnějším stínem.
.shadow{width: 200px;height: 200px;box-shadow: 3px 5px 16px black;background: #0000ff;}
<div class="shadow"></div>
Výsledek:
Čtverec o rozměrech 200px s černým vnějším stínem bez rozmazání.
.shadow2 {width: 200px;height: 200px;box-shadow: -5px -5px #000;background: #0000ff;}
<div class="shadow2"></div>
Výsledek:
Čtverec o rozměrech 200px s rozmazaným vnějším černým stínem dokola.
.shadow3 {box-shadow: 0 0 5px 5px #000;width: 200px;height: 200px;background: #0000ff;}
<div class="shadow3"></div>
Výsledek:
Čtverec o rozměrech 200px s vnitřním černým stínem vpravo a dole.
.shadow4 {box-shadow: inset -5px -5px 5px #000;width: 200px;height: 200px;background: #0000ff;}
<div class="shadow4"></div>
Výsledek: