为图片添加阴影效果css3(boxshadow)

可在该网站调整阴影样式：

http://www.wordpressthemeshock.com/css-drop-shadow/

代码会在你调整之后出现，所以就勤快点多动动它吧！

我的测试页代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片阴影</title>
</head>
<style type="text/css">
.class_box_shadow{
    555px;
    min- 270px;
    min-height: 130px;
    margin: auto;
    background: #ccc;
    border: 5px solid white;
    position:relative;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.sh_bottom{
    100%; height: 45%;
    position:absolute;
    z-index: -2;
    bottom: 0; right: 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.sh_bottom:after{
    content: "";
    position:absolute;
    right: 0; bottom:0;
    150px; height: 100px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
    box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
    -moz-transform:skew(10deg,10deg) translate(-40px,-15px);
    -webkit-transform:skew(10deg,10deg) translate(-40px,-15px);
    transform:skew(10deg,10deg) translate(-40px,-15px);
}
.sh_bottom:before{
    content: "";
    position:absolute;
    left: 0; bottom:0;
    150px; height: 100px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
    box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
    -webkit-transform:skew(-10deg,-10deg) translate(40px,-15px);
    -moz-transform:skew(-10deg,-10deg) translate(40px,-15px);
    transform:skew(-10deg,-10deg) translate(40px,-15px);
}
</style>
<body>

<div class="class_box_shadow"><img src="../web/images/002.jpg" /><div class="sh_bottom"></div></div>

</body>
</html>
图片效果（在IE浏览器里看不到理想的效果，所以记得要hack一下，火狐和谷歌都没有问题）：

效果还不错吧！！！