HTML and CSS Reference
In-Depth Information
figure 8-6
examples of box shadows
box-shadow: rgb(127, 90, 0)
-10px -10px 15px;
box-shadow: 15px 15px;
background-color: rgb(90, 141, 191);
box-shadow: inset rgb(0, 51, 101)
-10px -15px 15px,
inset white 5px 5px 5px;
background-color: rgb(101, 191, 101);
box-shadow: inset rgb(0, 101, 51)
10px 15px 15px,
inset white -5px -5px 25px,
rgb(51, 51, 51) -10px -10px 20px;
The
box-shadow
style was originally introduced as a browser extension under Mozilla
and WebKit. To provide the greatest cross-browser support for your box shadows, you should
always use all browser extensions. For example, the following code applies the Mozilla,
WebKit, and CSS3 styles to add a light gray box shadow to the
heading
element:
heading {
-moz-box-shadow: rgba(51, 51, 51, 0.3) 5px 5px 15px;
-webkit-box-shadow: rgba(51, 51, 51, 0.3) 5px 5px 15px;
box-shadow: rgba(51, 51, 51, 0.3) 5px 5px 15px;
}
Note that versions of Internet Explorer before version 9 do not support the
box-
shadow
style.
Kevin wants several box shadows added to his Web page. He would like each of the
four photos to have rounded corners with a box shadow in the lower-right corner. He
also wants a shadow added to the table of biographical data about Stanislaw Dubcek.
Finally, he wants to add an inset shadow to the entire main section of the page, to give it
a beveled appearance.
The color value can be
placed either before or
after the shadow offsets
and dimensions. If no color
is specified, the browser
creates a black shadow.
