Tutorial on using CSS3 property box-shadow

Author：Eve Cole Update Time：2010-05-14 17:29:27

The box-shadow property of CSS3 allows us to easily achieve layer shadow effects. Let’s explain this attribute in detail in practice.

1. Browser compatibility of box-shadow attribute

Let’s first look at the browser compatibility of this attribute:

Opera: I don’t know which version it started to support. When I posted this article for testing, I just updated Opera to the latest version 10.53, which already supports the box-shadow attribute.
Firefox supports this through the private property -moz-box-shadow .
Safari and Chrome support this via the private property -webkit-box-shadow .
Not supported by all IEs (I don’t know if IE9 has improved). Don’t worry, we will introduce some Hacks for IE at the end of the article.

box-shadow has six settable values:

img{box-shadow: Shadow type X-axis displacement Y-axis displacement shadow size shadow extension shadow color}

When no shadow type is set, the default is shadow effect. When set to inset, it is an inner shadow effect.
X-axis and Y-axis displacement are not equivalent but similar to "angle" and "position" in photoshop.
Shadow size, extension, color are the same as in Photoshop.
3. Example analysis
Let us look at the effect of a box-shadow through several examples. First, make a simple html for testing:
<html>
<head>
<style type="text/css">Write the CSS part here</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
Please note : To save trouble, only box-shadow is written in the CSS code below. In actual use, you should also write -moz-box-shadow and -webkit-shadow. What you need to do is very simple, copy two box-shadows and add -moz- and -webkit- in front of them.
img { -moz-box-shadow:2px 2px 10px #06C; -webkit-box-shadow:2px 2px 10px #06C; box-shadow:2px 2px 10px #06C; }