Používá se k vrhání stínů z prvků na úrovni bloku (jako divs).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Vodorovné odsazení 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.
- Svislé posunutí stínu, negativní znamená, že stín-rámeček bude nad rámečkem, pozitivní znamená, že stín bude pod rámečkem.
- Poloměr rozostření (volitelný), pokud je nastaven na 0, stín bude ostrý, čím vyšší číslo, tím více rozmazaný bude.
- 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
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 pole aplikace Internet Explorer
Potřebujete další prvky…
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Příbuzný
- CSS3: šíření hodnoty a stínování rámečku pouze na jedné straně
- Dokumenty Mozilla
- Více hranic s
box-shadow.