Game Development Reference
In-Depth Information
If you apply multiple shadows as just shown, any subsequent shadows should be
drawn behind shadows drawn earlier, should they so happen to overlap. For ex-
ample, the following set of shadows would display as a single, red shadow, since the
red (
#cc0000
) was declared first and they both just so happen to cover the same
area. Should the shadows have any amount of blur, the effect would be a mixture
of the shadows. Since in this particular example, the shadows are completely solid,
no blending takes place and the shadow in front takes precedence (since it's drawn
higher in the rendering stack).
div {
box-shadow: 5px 5px 0 #cc0000, 5px 5px 0
#0000cc;
}
There is also a fourth value that can be specified in a box shadow, which specifies
the spread (or size) of the shadow. The default value is zero, which means the blur
will begin right at the edge of the container created by the containing element. The
effect created by a shadow spread is similar to a border placed between the blur of
the shadow and the container created by the containing element.
Finally, the optional
inset
keyword tells the browser to draw the shadow from the
border of the container inwards, as opposed to from the border (or where the border
would be, had there been a border width greater than zero) outwards in the direction
of the horizontal and vertical offsets.
div {
box-shadow: inset 5px 5px 3px #aaa;
}
Note that in a multiple shadow declaration, each shadow can specify its own render-
ing orientation.
div {
box-shadow: inset 5px 5px 3px #aaa,
/* This shadow is drawn inside the div */
5px 5px 3px #aaa; /* And this shadow is
