Izmanto ēnu novirzīšanai no bloka līmeņa elementiem (piemēram, diviem).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Ēnas horizontālais nobīde , pozitīvs nozīmē, ka ēna būs lodziņa labajā pusē, negatīvā nobīde - ēnu lodziņa kreisajā pusē.
- Ēnas vertikālais nobīde , negatīva, nozīmē, ka rūtiņa-ēna būs virs lodziņa, pozitīva - ēna būs zem lodziņa.
- Izplūšanas rādiuss (pēc izvēles), ja iestatīts uz 0, ēna būs asa, jo lielāks skaitlis, jo izplūdušāks tas būs.
- Izkliedēšanas rādiuss (pēc izvēles), pozitīvās vērtības palielina ēnas lielumu, negatīvās vērtības samazina. Noklusējums ir 0 (ēna ir tāda paša izmēra kā aizmiglojums).
- Krāsa
Piemērs
Iekšējā ēna
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Piemērs
Internet Explorer lodziņa ēna
Jums nepieciešami papildu elementi ...
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; )Tikai no vienas puses
Izmantojot negatīvo izkliedes rādiusu, jūs varat saspiest lodziņa ēnu un nogrūst to tikai no kastes vienas malas.
.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; )Saistīts
- CSS3: izplatīšanās vērtība un lodziņa ēna tikai vienā pusē
- Mozilla Docs
- Vairākas robežas ar
box-shadow.