Brukes til å kaste skygger av elementer på blokknivå (som 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; )- Den horisontale forskyvningen av skyggen, positiv betyr at skyggen vil være til høyre for boksen, en negativ forskyvning vil sette skyggen til venstre for boksen.
- Den vertikale forskyvningen av skyggen, negativ betyr at bokseskyggen vil være over boksen, en positiv betyr at skyggen vil være under boksen.
- Uskarphetsradiusen (valgfritt), hvis den er satt til 0, blir skyggen skarp, jo høyere tallet er, desto uskarper blir det.
- Spredningsradiusen (valgfritt), positive verdier øker størrelsen på skyggen, negative verdier reduserer størrelsen. Standard er 0 (skyggen har samme størrelse som uskarphet).
- Farge
Eksempel
Indre skygge
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Eksempel
Internet Explorer Box Shadow
Du trenger ekstra elementer ...
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; )Kun på én side
Ved å bruke en negativ spredningsradius kan du klemme inn en bokseskygge og bare skyve den av den ene kanten av en boks.
.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; )I slekt
- CSS3: spred verdi og bokseskygge bare på den ene siden
- Mozilla Docs
- Flere grenser med
box-shadow.