Border and Box Effects 109
The fifth box has two shadows applied to it, with each set of values sepa-
rated by a comma. The first value set is the same as in the fourth box, and
the second makes a black (or inherited color) shadow with a negative hori-
zontal distance, causing the shadow to fall to the left of the box.
Inset Shadows
I briefly mentioned the optional inset keyword at the beginning of the pre-
vious section. If present, this keyword draws a shadow on the interior of the
box, but it also has the effect of “flipping” the shadow to the other side of
the box. What I mean is that where a regular—that is, outset—shadow with
positive x and y values would appear at the bottom right of the box, an inset
shadow would appear at the top left.
To illustrate, I’ll use the same code as for the previous example but add
the inset keyword to each one:
.shadow-one { box-shadow: inset 4px 4px; }
.shadow-two { box-shadow: inset 4px 4px 3px; }
.shadow-three { box-shadow: inset 12px 12px 2px -6px; }
.shadow-four { box-shadow: inset #999 4px -4px 2px 0; }
.shadow-five { box-shadow:
inset #999 4px -4px 2px 0,
inset -4px 4px 2px;
}
The result is shown in Figure 9-14, and as you can see, it’s almost the
inverse of Figure 9-13; all offset, blur radius, and color values are the same,
but the shadows now appear on the interior of the boxes, and in the oppo-
site corners.
Figure 9-14: Inset shadows
The box-shadow property is broadly implemented, with unprefixed sup-
port in IE9+ and all other modern browsers. The -webkit- prefix is required
for older versions of Safari for iOS and the stock Android browser.
Summary
I mentioned at the beginning of the previous chapter that the Backgrounds
and Borders Module became a priority for the W3C because of the clamor
from web developers. The new properties it introduces are extremely handy
for removing extraneous elements used as containers for purely visual styl-
ing from markup, giving developers finer control over the way pages are
presented. With a multitude of new background and border properties at
