CSS实现图片阴影效果三部曲(译文)

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

正文开始：
第一步、如何实现图片阴影效果
为了创建这种效果，首先你设置一个阴影图片背景在外套图层标签。因为图层标签是块级元素，它们将水平伸展，并占据可以获取的所有空间。这种情形下我们可以使用这种技巧，用图层外套住图片。另外，也可以设置图层浮动，来收缩外套。（笔者用的系统是mac）
[code].img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}[/code]

为了显示带阴影效果的图片，需要设置图片负边距偏移。（阴影效果在右边和下方，所以设置整体移动5个像素）
[code].img-wrapper img {
margin: -5px 5px 5px -5px;
}
[/code]

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