Används för att kasta skuggor (ofta kallade "Drop Shadows", som i Photoshop) från element. Här är ett exempel med djupast möjliga webbläsarstöd:
.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 är:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Skuggans horisontella förskjutning (krävs), positivt betyder att skuggan kommer att finnas till höger om rutan, en negativ förskjutning kommer att placera skuggan till vänster om rutan.
- Den vertikala förskjutningen (krävs) av skuggan, en negativ betyder att rutan-skuggan kommer att vara över rutan, en positiv betyder att skuggan kommer att vara under rutan.
- Suddighetsradien (krävs), om den är inställd på 0 kommer skuggan att vara skarp, ju högre siffra, desto suddigare blir den och ju längre ut skuggan sträcker sig. Till exempel kommer en skugga med 5 pixlar av horisontell förskjutning som också har en 5 pixel suddighetsradie att vara 10 pixlar av total skugga.
- Spridningsradien (valfritt), positiva värden ökar skuggans storlek, negativa värden minskar storleken. Standard är 0 (skuggan är lika stor som oskärpa).
- Färg (krävs) - tar valfritt färgvärde, som hex, namngiven, rgba eller hsla. Om färgvärdet utelämnas dras rutskuggor i förgrundsfärgen (text
color). Men tänk på att äldre WebKit-webbläsare (pre Chrome 20 och Safari 6) ignorerar regeln när färg utelämnas.
Att använda en halvtransparent färg som rgba(0, 0, 0, 0.4)är vanligast och en fin effekt, eftersom den inte täcker helt och hållet vad den är över, men låter det som finns under visas lite, som en riktig skugga.
Exempel
Inre skugga
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Exempel
Internet Explorer (8 och senare) Box Shadow
Du behöver ett extra element, men det går 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; )Endast en sida
Med en negativ spridningsradie kan du klämma in en lådskugga och bara trycka bort den från en låda.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Flera gränser och mer
Du kan komma med separat rutskugga så många gånger du vill. Till exempel visar detta två skuggor med olika positioner och olika färger på samma element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Exemplet visar hur du kan använda det för att skapa flera gränser:
Se Penna flera box-skugga svalka! av Chris Coyier (@chriscoyier) på CodePen.
Genom att tillämpa skuggorna på pseudoelement som du sedan manipulerar kan du få några ganska snygga 3D-skuggrutor:
Se Pen CSS3 Box Shadows Effects av Halil İbrahim Nuroğlu (@haibnu) på CodePen.
Supermjuka skuggor via flera kommaseparerade värden:
Se Pen
smooth-box-shadow av Chris Coyier (@chriscoyier)
på CodePen.
Webbläsarstöd
Se utdrag överst på sidan för detaljer om täckning av leverantörsprefix. Det här är en av de egenskaperna där det är ganska rimligt att släppa prefixen just nu.