CSS实现图片阴影效果三部曲 css shadow triple stepsrA9中国教程在线
此文译自CSS.Mastery.Advanced.Web.Standards.Solutions.Feb.2006.pdfrA9中国教程在线
预览效果请直接看第三步。译文为直译，具体请参考英文版本。英文书籍也有很多“八股”，看多了就习惯了rA9中国教程在线

正文开始：rA9中国教程在线
第一步、如何实现图片阴影效果rA9中国教程在线
为了创建这种效果，首先你设置一个阴影图片背景在外套图层标签。因为图层标签是块级元素，它们将水平伸展，并占据可以获取的所有空间。这种情形下我们可以使用这种技巧，用图层外套住图片。另外，也可以设置图层浮动，来收缩外套。（笔者用的系统是mac） rA9中国教程在线

为了显示带阴影效果的图片，需要设置图片负边距偏移。（阴影效果在右边和下方，所以设置整体移动5个像素）rA9中国教程在线

—————————————————————-rA9中国教程在线
FirstrA9中国教程在线
To create the effect, you first need to apply your shadow graphic to the background of therA9中国教程在线
wrapper div. Because divs are block-level elements, they stretch horizontally, taking up allrA9中国教程在线
the available space. In this situation we want the div to wrap around the image. You canrA9中国教程在线
do this by explicitly setting a width for the wrapper div, but doing so reduces the usefulnessrA9中国教程在线
of this technique. Instead, you can float the div, causing it to “shrink-wrap” on modernrA9中国教程在线
browsers, with one exception: IE 5.x on the Mac.rA9中国教程在线
.img-wrapper {rA9中国教程在线
background: url(shadow.gif) no-repeat bottom right;rA9中国教程在线
clear: right;rA9中国教程在线
float: left;rA9中国教程在线
}rA9中国教程在线
To reveal the shadow image and create the drop shadow effect (see Figure 3-13), you needrA9中国教程在线
to offset the image using negative margins:rA9中国教程在线
.img-wrapper img {rA9中国教程在线
margin: -5px 5px 5px -5px;rA9中国教程在线
}rA9中国教程在线

该篇文章附带的 HTML 代码片段如下:
rA9中国教程在线</P> <P width=175 height="192" src="http://localhost/Files/file/div css/2008-3/26/1E4IKB6I84EKD4EKFG.jpg" alt="来先休息抽根烟">rA9中国教程在线</P> <P> <HR color=#ff0000 SIZE=1 noShade> 第三步的效果在FF，Opera，IE下看都是正常的。至此css shadow 三部曲结束rA9中国教程在线<BR>
[Ctrl+A 全部选择 提示:你可先修改部分代码，再按运行]
rA9中国教程在线
BTW：阴影图片的选择可以是800*800大小的图片了，阴影的效果为5px就可以了。如果你想要比5px更长的可以自制一个。rA9中国教程在线
在Photoshop里面新建795*795的透明，用白色填充图层1，设置样式默认的阴影修改距离为1，如果设置距离为0实际上5px的阴影只有4px了，再修改画布为800*800的，调整一下位置再保存输出。 rA9中国教程在线