The Not Too Distant Future of CSS - The CSS - page 233

distance (the growth or contraction of a shadow from the size of an
element). The first two values, or the offsets, are required. If the blur
or spread lengths are not supplied, they are assumed to be 0 .

Shown in Figure 14.1 , the following code demonstrates a sharp box
shadow (no blur radius) and a fuzzy shadow (with a blur radius set).

Figure 14.1
Example of a box
shadow without
and with a blur
radius.

div.one {
/* for Firefox */
-moz-box-shadow: 10px 10px rgba(0,0,0,0.8);
/* for Safari and Chrome */
-webkit-box-shadow: 10px 10px rgba(0,0,0,0.8);
/* W3C specs */
box-shadow: 10px 10px rgba(0,0,0,0.8);

}
div.two {
/* for Firefox */
-moz-box-shadow: 10px 10px 20px rgba(0,0,0,0.8);
/* for Safari and Chrome */
-webkit-box-shadow: 10px 10px 20px rgba(0,0,0,0.8);
/* W3C specs */
box-shadow: 10px 10px 20px rgba(0,0,0,0.8);

(continues on next page) }