Používa sa na vrhanie tieňov z prvkov na úrovni blokov (napríklad prvkov div).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Horizontálne odsadenie tieňa, kladné, znamená, že tieň bude vpravo od rámčeka, záporné odsadenie umiestni tieň na ľavú časť rámčeka.
- Vertikálne odsadenie tieňa, záporné znamená, že tieň poľa bude nad rámčekom, kladné znamená, že tieň bude pod rámčekom.
- Polomer rozmazania (voliteľné), ak je nastavený na 0, tieň bude ostrý, čím vyššie číslo, tým viac bude rozmazaný.
- Polomer šírenia (voliteľné), kladné hodnoty zväčšia veľkosť tieňa, záporné hodnoty zmenšia veľkosť. Predvolená hodnota je 0 (tieň má rovnakú veľkosť ako rozmazanie).
- Farba
Príklad
Vnútorný tieň
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Príklad
Tieň poľa aplikácie Internet Explorer
Potrebujete ďalšie 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; )Iba na jednej strane
Pomocou negatívneho polomeru šírenia môžete vtesnať do tieňa poľa a odtlačiť ho iba od jedného okraja poľa.
.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; )Súvisiace
- CSS3: hodnota šírenia a tieň poľa iba na jednej strane
- Dokumenty Mozilla
- Viaceré hranice s
box-shadow.