Putting it All Together - HTML5 with CSS3 - page 374

-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-ms-box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-o-box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.25);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
You can see how repetitive it is to declare the same shadow values five times in one rule, each time with a
different prefix, but it's the best way to make sure every browser that supports the property will display the
shadows. That being said, box-shadow is a stable property and well supported in all the latest browsers.
Current versions of Firefox, Safari, Chrome, Opera, and IE all support un-prefixed box shadows as a CSS3
standard. In fact, some browsers have already stopped supporting their prefixed box-shadow properties in
their newer versions. If you're not concerned with displaying shadows in browsers a few years old, you can
safely omit the prefixes and use box-shadow un-prefixed from now on.
Figure 10-19 shows the updated footer along with part of the content wrapper, both now sporting nicely
blended drop shadows to separate them from the background and lift them off the page. A few years ago
this kind of visual effect could have only been accomplished with images, but today we can do it with just a
few lines of CSS.
Figure 10-19. The site's footer, now with shadow
A single element can have any number of box shadows, with each set of values separated by commas. As
with multiple background images, the last shadow declared will appear on the bottom of the stack with
previous shadows layering on top of it. Listing 10-25 shows an example of a single element with three
shadows, each a different color and different offset. Omitting values for blur radius and spread radius
means the shadows default to no blur and no spread, so they're perfect shadow copies of the box that
casts them. You can see the rendered effect of these stacked shadows in Figure 10-20.
Listing 10-25. Applying multiple, comma-separated box shadows to a single element
.shadow {
background: #eee;
color: #999;
box-shadow: 5px 5px #ccc, 10px 10px #999, 15px 15px #666;
}