再读《精通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%的代价！

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

完整实例代码