Adding Borders and Drop Shadows - Beginning CSS3 - page 196

#spread1 {
box-shadow: 5px 5px 7px 4px rgba(0,0,0,0.3);
}
#spread2 {
box-shadow: 5px 5px 7px 12px rgba(0,0,0,0.3);
}
In both rules, the horizontal and vertical offsets are 5px . As Figure 9-17 shows, the 4px spread of the first rectangle
is hidden behind the element on the left and top, but the 12px spread of the second rectangle is visible on all sides.
Figure 9-17. The offsets affect the position of the spread shape
Simulating Multicolored Borders
Combining a spread shape with offsets and a blur radius rarely produces an attractive effect. However, using
multiple spread shapes with no offset or blur offers an easy way to create multicolored borders. The box-shadow
property accepts multiple shadow effects as a comma-separated list. Each subsequent effect is painted behind
the preceding one, so the smallest one must come first followed by the others in increasing sizes. The style rule
for the heading< div> in multiple_spreads.html looks like this:
#heading {
text-align: center;
width: 20em;
padding: 0.5em 1em;
background-color: #DCEBDD;
margin: 30px auto;
border-radius: 20px;
box-shadow: #A0D5D6 0 0 0 5px,
#789AA1 0 0 0 10px,
#AD9A27 0 0 0 15px,
#304345 0 0 0 20px;
}
The horizontal and vertical offsets and blur radius in each value are set to 0 . The spread value in each one
is incremented by 5px , producing the result seen in Figure 9-18 . he <div> has rounded corners, so the spread
colors added by box-shadow follow the same outline.
Figure 9-18. Using multiple spreads of increasing sizes creates the impression of a multicolored border