CSS基础应用学习系列(3)——图像的CSS阴影效果
现在大多数人使用PS直接给图像添加阴影，但是，可以使用CSS产生简单的阴影效果，而不需要修改低层的图像。
它的工作原理是，将一个大的阴影图像应用于容器div的背景，然后使用负值的空白扁偏移这个图像，从而显示出阴影。
首先需要创建阴影图像，我用PS创建阴影图像，如下所示：
这种技术的标记非常简单：
<div class="img-wrapper"><img src="images/face.PNG" width="378" height="478" alt="I'm Leepy!!" /></div>
(注意：一定要将这些代码放在一行上，而且在div和图像之间不能有空格，IE5.5有一个空格bug,如果代码在不同的行上，那么这个bug会在图像和阴影之间造成间隙。)
为了产生阴影效果，首先需要将阴影图像应用于容器div的背景，因为div是块级元素，所以它们会水平伸展，占据所有可用空间，在这种情况下，希望div包围图像，可以显式地设置容器div的宽度，但是这么做会限制这种技术的灵活性。可以对div进行浮动，让它在现代浏览器上产生“收缩包围”的效果。
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
为了露出阴影图像并产生阴影效果，需要使用负值的偏移这个图像：
.img-wrapper img {
left:-5px;
top:-5px;
}
还可以给图像加上边框和一些填充，从而产生类似照片边框的效果
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
相关代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/css">
<!--
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/css">
<!--
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
-->
</style>
</head>
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
-->
</style>
</head>
<body>
<div class="img-wrapper"><img src="images/face.PNG" width="378" height="478" alt="I'm Leepy!!" /></div>
</body>
</html>
</html>
阴影图下载地址
