Používá se k vrhání stínů (často nazývaných „Vržené stíny“, jako ve Photoshopu) z prvků. Zde je příklad s nejhlubší možnou podporou prohlížeče:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )To je:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Vodorovné odsazení (povinné) stínu, kladné znamená, že stín bude vpravo od rámečku, záporné odsazení umístí stín na levé straně rámečku.
- Vertikální posun (požadováno) stínu, negativní znamená, že stín pole bude nad rámečkem, pozitivní znamená, že stín bude pod rámečkem.
- Poloměr rozostření (povinný), pokud je nastaven na 0, stín bude ostrý, čím vyšší číslo, tím více bude rozmazaný a stín se bude dále rozšiřovat. Například stín s 5px vodorovným posunem, který má také poloměr rozostření 5px, bude 10px celkového stínu.
- Poloměr šíření (volitelně), kladné hodnoty zvětšují velikost stínu, záporné hodnoty zmenšují velikost. Výchozí hodnota je 0 (stín má stejnou velikost jako rozostření).
- Barva (požadováno) - přebírá jakoukoli hodnotu barvy, například hex, pojmenovanou, rgba nebo hsla. Pokud je hodnota barvy vynechána, stíny polí se nakreslí barvou popředí (text
color). Mějte však na paměti, že starší prohlížeče WebKit (před Chrome 20 a Safari 6) ignorují pravidlo, když je barva vynechána.
Používání poloprůhledné barvy jako rgba(0, 0, 0, 0.4)je nejběžnější a pěkný efekt, protože úplně / neprůhledně nezakrývá to, co skončilo, ale umožňuje, aby se to, co je pod ní, projevilo trochu jako skutečný stín.
Příklad
Vnitřní stín
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Příklad
Stín rámečku Internet Explorer (8 a nižší)
Potřebujete další prvek, ale je to možné filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Pouze na jedné straně
Pomocí záporného poloměru šíření můžete vtlačit stín rámečku a odtlačit ho pouze z jednoho okraje rámečku.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Více hranic a další
Můžete oddělit čárkou samostatný stínový rámeček, kolikrát chcete. Například to ukazuje dva stíny s různými pozicemi a různými barvami na stejném prvku:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Příklad ukazuje, jak to můžete použít k vytvoření více ohraničení:
Podívejte se na pero více stínů ve stínu! podle Chris Coyier (@chriscoyier) na CodePen.
Aplikováním stínů na pseudo prvky, se kterými poté manipulujete, můžete získat docela pěkné 3D efektní stíny boxů:
Podívejte se na efekty CSS3 Box Pen Shadows od Halila İbrahima Nuroğlu (@haibnu) na CodePen.
Super hladké stíny pomocí více hodnot oddělených čárkami:
Podívejte se na Pen Pen
smooth box-shadow od Chris Coyier (@chriscoyier)
na CodePen.
Podpora prohlížeče
Podrobnosti o pokrytí předponou dodavatele najdete v úryvku v horní části stránky. Toto je jedna z těch vlastností, kde je v tomto okamžiku docela vhodné zrušit předpony.