HTML and CSS Reference
In-Depth Information
[...]
<div class="one">
Box with a sharp drop shadow
</div>
<div class="two">
Box with a drop shadow with a large blur
</div>
Shadows can be draw inside an element using the
inset
keyword in the
definition of a shadow. Replacing the inside shadow made with a back-
ground image used on the text input field in Figure 11.4 can be done with
the following code (
Figure 14.2
):
div.one {
/* for Firefox */
-moz-box-shadow:
inset
10px 10px rgba(0,0,0,0.8);
/* for Safari and Chrome */
-webkit-box-shadow:
inset
10px 10px rgba(0,0,0,0.8);
/* W3C specs */
box-shadow:
inset
10px 10px rgba(0,0,0,0.8);
}
div.two {
/* for Firefox */
-moz-box-shadow:
inset
10px 10px 20px rgba(0,0,0,0.8);
/* for Safari and Chrome */
-webkit-box-shadow:
inset
10px 10px 20px rgba(0,0,0,0.8);
/* W3C specs */
box-shadow:
inset
10px 10px 20px rgba(0,0,0,0.8);
}
[...]
<div class="one">
Box with a sharp inset shadow
</div>
