Box-shadow, one of CSS3′s best new features

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Here’s a basic example:

Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box.

In theory, the code for this is straightforward:

#example1 {
box-shadow: 10px 10px 5px #888;
}

But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

原文链接： http://www.css3.info/preview/box-shadow/