再读《精通css》08：阴影

3.3 阴影
对img-wrapper使用阴影图片作为背景，再用负的空白边移动图片，造成阴影的效果。这涉及到一些细节问题在注释上体现
<div class="img-wrapper"><img src="dunstan.jpg" width="300"?
height="300" alt="Dunstan Orchard" /></div>
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;/*为什么要加这个浮动？和设置了float：left有关？*/
float: left;/*设置float属性可产生“收缩包围的效果”*/
position: relative;/*修复IE6下的bug*/
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;/*让边框和图片有4px的空间，为了美观*/
display: block;/*修复IE6下的bug*/
margin: -5px 5px 5px -5px;/*设置使图片像左上角移动5个像素*/
position: relative;/*修复IE6下的bug*/
}

依然使用上面的方法，但不使用负的margin，而是对图片使用相对定位。一样可以达到相同的效果：
.img-wrapper {
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，top的值来偏移图片*/
left:-5px;
top:-5px;
}

对于上面的方法。追求完美的人会说在阴影开始的地方有点生硬，解决办法是在加一个div，在这个div上运用一个半透明的png做遮罩，就可以了。但郁闷的IE6又不支持png半透明。所以要用gif图片代替。代码如下：
<div class="img-wrapper">
<div>
<img src="dunstan.jpg" width="300" height="300" alt="Dunstan" />
</div>
</div>
.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-wrapper div {
background: url(images/mask.png) no-repeat left top !important;
background: url(images/mask.gif) no-repeat left top;/*IE6不认识！important，所以会执行这条规则*/
padding: 0 5px 5px 0;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
权衡问题的大小和解决问题所引入的复杂度。我觉得完全没有必要去这么做。往往为了20%的完美要付出80%的代价！

同样书中介绍的最后一种方法——洋葱皮阴影。也是添加了额外的复杂度。在这里就不介绍了。但在代码下载里有实现，相信一看就明白了吧。
完整实例代码