There is a glaring problem with box-shadow. As the name implies, it is limited to the rectangular CSS box shape of the element it is applied to. Here's a screen grab of a triangle shape made with CSS (you can view the code in example_06-08) with a box shadow applied:

Not exactly what I was hoping for. Thankfully, we can overcome this issue with CSS filters, part of the Filter Effects Module Level 1 (http://www.w3.org/TR/filter-effects/). They are not as widely supported as box-shadow, but work great with a progressive enhancement approach. If a browser doesn't understand what to do with the filter it simply ignores it. For supporting browsers, the fancy effects are rendered.

Here is that same element with a CSS drop-shadow filter applied instead of a box-shadow:

Here is the format for CSS filters:

.filter-drop-shadow {
    filter: drop-shadow(8px 8px 6px #333);
}

After the filter property we specify the filter we want to use, drop-shadow in this example, and then pass in the arguments for the filter. The drop-shadow follows a similar syntax to box-shadow so this one is easy; x and y offset, blur, then spread radius (both optional), and finally color (also optional, although I recommend specifying a color for consistency).

.MultipleFilters {
    filter: opacity(10%) blur(2px) sepia(35%);
}