精通CSS-洋葱皮阴影

洋葱皮阴影

我要演示的最后一种阴影方法使用与圆角框方法非常相似的技术。但是，并不是使用蒙板盖住阴影的末尾，而是创建两个阴影末尾GIF，然后将它们覆盖在主阴影图像的末尾上。为此，需要向标记中添加两个无语义的div，作为应用这些图像的钩子。

基本的HTML如下所示：

<div class="img-wrapper">
   <div class="img-outer">
      <div class="img-inner">
  <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan" />
      </div>
   </div>
</div>

与前面一样，将主阴影图像作为背景应用于主div：

.img-wrapper{
 background:url(images/shade.gif) no-repeat right bottom;
 float:left;
}

也与前面一样，对这个div进行浮动，让它产生收缩包围。

现在，可以将左下角图像应用于外层div的左下角，将右上角图像应用于内层div的右上角。在内层div的底部和左边添加一些填充，产生阴影效果。为了确保主图像容器在Mac上的IE 5.2中产生收缩包围，还需要浮动这两个div：

.img-outer{
 background:url(images/bottom-left2.gif) no-repeat left bottom;
 float:left; /* ;KLUDGE; Fixes problem in Ie5.2/Mac */
}

.img-inner{
 background:url(images/bottom-right2.gif) no-repeat top right;
 padding:0 5px 5px 0;
 float:left; /* ;KLUDGE; Fixes problem in Ie5.2/Mac */
}

最后与前面一样，可以在图像上添加边框和一些填充，产生照片式边框：

.img-wrapper img{
 background-color:#fff;
 border:1px solid #a9a9a9;
 padding:4px;
 display:block;
}

最终的CSS如下所示：

.img-wrapper{
 background:url(images/shade.gif) no-repeat right bottom;
 float:left;
}

.img-outer{
 background:url(images/bottom-left2.gif) no-repeat left bottom;
 float:left; /* ;KLUDGE; Fixes problem in Ie5.2/Mac */
}

.img-inner{
 background:url(images/bottom-right2.gif) no-repeat top right;
 padding:0 5px 5px 0;
 float:left; /* ;KLUDGE; Fixes problem in Ie5.2/Mac */
}

.img-wrapper img{
 background-color:#fff;
 border:1px solid #a9a9a9;
 padding:4px;
 display:block;
}

这种方法非常容易理解，而且它创建的阴影在许多浏览器上都可以工作。它的缺点是需要添加两个额外的无语义div。这是因为CSS当前不允许在一个元素上添加多个背景图像。以后CSS 3将提供这个功能，所以使用多个元素只是一种过渡性方法，以后应该很容易从文档中去掉这些额外的标记。如果希望标记更简洁，那么可以使用JavaScript或生成的内容来添加这些额外元素。

</div>
</div>
</div>

您可能会对以下文章感兴趣：

精通CSS-来自Clagnut的阴影方法

精通CSS-洋葱皮阴影

精通CSS-简单的CSS阴影

精通CSS-模糊阴影

精通CSS-山顶角

css给容器和图片添加阴影效果