Bruges til at kaste skygger (ofte kaldet “Drop Shadows”, som i Photoshop) fra elementer. Her er et eksempel med den dybeste mulige browsersupport:
.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 vandrette forskydning (påkrævet) af skyggen, positiv betyder, at skyggen er til højre for kassen, en negativ forskydning placerer skyggen til venstre for kassen.
- Den lodrette forskydning (krævet) af skyggen, en negativ betyder, at bokseskygge vil være over feltet, en positiv betyder, at skyggen vil være under feltet.
- Uskarphedsradius (påkrævet), hvis skyggen er indstillet til 0, vil den være skarp, jo højere tallet er, desto mere sløret bliver det, og jo længere ude vil skyggen strække sig. For eksempel vil en skygge med 5 pixel vandret forskydning, der også har en 5 pixel sløringsradius, være 10 pixel af den samlede skygge.
- Spredningsradius (valgfri), positive værdier øger størrelsen på skyggen, negative værdier mindsker størrelsen. Standard er 0 (skyggen har samme størrelse som sløring).
- Farve (påkrævet) - tager en hvilken som helst farveværdi, som hex, navngivet, rgba eller hsla. Hvis farveværdien udelades, tegnes boksskygger i forgrundsfarven (tekst
color). Men vær opmærksom på, ældre WebKit-browsere (pre Chrome 20 og Safari 6) ignorerer reglen, når farve udelades.
Brug af en semi-gennemsigtig farve som rgba(0, 0, 0, 0.4)er mest almindelig og en dejlig effekt, da den ikke helt / uigennemsigtigt dækker det, det er forbi, men tillader, at det nedenunder viser sig lidt som en rigtig 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 derunder) Box Shadow
Du har brug for et ekstra element, men det er i stand til 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 en-side
Ved hjælp af en negativ spredningsradius kan du klemme i en bokseskygge og kun skubbe den ud af den ene kant af en kasse.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Flere kanter og mere
Du kan komme med separat boksskygge mange gange, som du vil. For eksempel viser dette to skygger med forskellige positioner og forskellige farver på det samme element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Eksemplet viser, hvordan du kan bruge det til at oprette flere grænser:
Se Pen Multiple box-shadow coolness! af Chris Coyier (@chriscoyier) på CodePen.
Ved at anvende skyggerne på pseudo-elementer, som du derefter manipulerer, kan du få nogle ret smarte 3D-udseende bokseskygger:
Se Pen CSS3 Box Shadows Effects af Halil İbrahim Nuroğlu (@haibnu) på CodePen.
Super glatte skygger via flere komma-adskilte værdier:
Se pen
glat bokseskygge af Chris Coyier (@chriscoyier)
på CodePen.
Browsersupport
Se uddrag øverst på siden for detaljer om dækning af leverandørpræfiks. Dette er en af de egenskaber, hvor det er rimeligt at slippe præfikser på dette tidspunkt.