Stínování blokových prvků je jedna z částí CSS3, která je dnes (i bez prefixů) už podporovaná poměrně dobře. Podporovány jsou tyto prohlížeče IE9+, Firefox 4+, Chrome, Opera a Safari 5.1. Ve starších verzích Chrome a Firefoxu lze použít pro správné fungování prefix (-moz a -webkit).
Klasické použití stínu:
box-shadow: 5px 5px 10px #000;
Demo:
První parametr určuje horizontální posun, druhý vertikální posun, třetí hloubku stínu a čtvrtý barvu stínu.
Parametr „inset“
Kromě toho lze jako první parametr vlastnosti uvést „inset“, který vlastnosti řekne, že stín nemá být mimo prvek, ale uvnitř.
box-shadow: inset 5px 5px 10px #000;
Demo:
Rámeček před stínem
Dalším parametrem může být určení tloušťky rámečku, který předchází stínu.
box-shadow: 5px 5px 10px 10px #000;
Demo:
Více stínů najednou
Pokud požadujete vložení více stínů na jeden prvek, stačí je ve vlastnosti box-shadow oddělit čárkou.
box-shadow: 5px 5px 10px #000, -5px -5px 10px #ff5;
Demo: