Brukes til å kaste skygger (ofte kalt “Drop Shadows”, som i Photoshop) fra elementer. Her er et eksempel med dypest mulig nettleserstøtte:
.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 */ )Det er:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Den horisontale forskyvningen (påkrevd) 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 (påkrevd) av skyggen, en negativ betyr at bokseskyggen vil være over boksen, en positiv betyr at skyggen vil være under boksen.
- Uskarphetsradiusen (påkrevd), hvis skyggen er satt til 0, vil den være skarp, jo høyere tallet er, jo mer uskarpt blir det, og jo lenger ut vil skyggen strekke seg. For eksempel vil en skygge med 5 piks horisontal forskyvning som også har en uskarphetsradius på 5 piks være 10 piks av den totale skyggen.
- 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 (påkrevd) - tar hvilken som helst fargeverdi, som hex, navngitt, rgba eller hsla. Hvis fargeverdien er utelatt, tegnes rammeskygger i forgrunnsfargen (tekst
color). Men vær oppmerksom på at eldre WebKit-nettlesere (pre Chrome 20 og Safari 6) ignorerer regelen når farge er utelatt.
Å bruke en semi-gjennomsiktig farge som rgba(0, 0, 0, 0.4)er vanligst, og en fin effekt, da den ikke dekker helt / ugjennomsiktig det som er over, men lar det som er under vises litt, som en ekte skygge.
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 (8 og nedover) Box Shadow
Du trenger et ekstra element, men det er i stand til med 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; )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 ( box-shadow: 0 8px 6px -6px black; )Flere grenser og mer
Du kan komma med separat boksskygge mange ganger du vil. For eksempel viser dette to skygger med forskjellige posisjoner og forskjellige farger på samme element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Eksemplet viser hvordan du kan bruke det til å opprette flere grenser:
Se Pen Multiple box-shadow coolness! av Chris Coyier (@chriscoyier) på CodePen.
Ved å bruke skyggene på pseudo-elementer som du deretter manipulerer, kan du få noen ganske fancy 3D-utseende bokseskygger:
Se pennen CSS3 Box Shadows Effects av Halil İbrahim Nuroğlu (@haibnu) på CodePen.
Superglatte skygger via flere kommaadskilte verdier:
Se pennens
glatte boksskygge av Chris Coyier (@chriscoyier)
på CodePen.
Nettleserstøtte
Se utdrag øverst på siden for detaljer om dekning av leverandørprefiks. Dette er en av de egenskapene der å slippe prefiksene er ganske rimelig på dette punktet.