转载至http://css-tricks.com/almanac/properties/b/box-shadow/
Used in casting shadows (often called "Drop Shadows" like in Photoshop). Using them
.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 */
}
- The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
- The vertical offset (required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
- The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
- The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
- Color (required) - takes any color value, like hex, named, rgba or hsla.
Using a semi-transparent color like rgba(0,0,0,0.4)
is most common, and a nice effect, as it doesn't completely/opaquely cover what it's over, but allows what's underneath to show through a bit, like a real shadow.
Example
Inner Shadow
.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
Example
Internet Explorer (8 and down) Box Shadow
You need an extra element, but it's do-able with filter
.
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>
.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;
}
One-Side Only
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.
.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;
}