精通CSS-简单的CSS阴影

阴影是一种很流行、很有吸引力的设计特性，它给平淡的设计增加了深度，形成立体感。大多数人使用Photoshop这样的图形软件直接给图像添加阴影。但是，可以使用CSS产生简单的阴影效果，而不需要修改底层的图像。

这么做有几个原因。例如，你可能让非技术人员管理站点，而他不会使用Photoshop，或者要从无法使用Photoshop的地方（比如网吧）上载图像。通过使用预定义的阴影样式，只需上载常规图像，它在站点上就会带着阴影显示。

使用CSS的最大好处之一是灵活性。如果以后想去掉阴影效果，那么只需要在CSS文件中修改几行代码，而不必重新处理所有图像。

www.1976design.com的Dunstan Orchard首先描述了这个非常简单的阴影方法。它的工作原理是：将一个大的阴影图像应用于容器div的背景。然后使用负值的空白边偏移这个图像，从而显示出阴影。

首先需要创建阴影图像。我使用Adobe Photoshop创建阴影图像。创建一个新的Photoshop文件，其尺寸与图像的最大尺寸一样。为了保险，我创建一个800×800像素的文件。打开背景层并且填充一种颜色，阴影将放在这种颜色上面。我让背景层保持白色。创建一个新的层并且填充上白色。现在，将这个层向左上方移动4或5个像素，然后对这个层应用4或5像素宽的阴影。保存这个文件并将它命名为shadow.gif（见图3-12）。

图3-12  800×800像素的shadow.gif，在放大图中可以看到5像素宽的阴影

这种技术的标记非常简单：

<div class="img-wrapper"><img src="dunstan.jpg" width="300" 
height="300" alt="dunstan orchard" />
</div>

为了产生阴影效果，首先需要将阴影图像应用于容器div的背景。因为div是块级元素，所以它们会水平伸展，占据所有可用空间。在这种情况下，希望div包围图像。可以显式地设置容器div的宽度，但是这么做会限制这种技术的灵活性。可以对div进行浮动，让它在现代浏览器上产生“收缩包围 ”的效果。Mac上的IE 5.x不支持这种技术，可以对Mac上的IE 5.x隐藏这些样式。关于对各种浏览器隐藏规则的更多信息，请参见第8章，那里会讨论各种招数和过滤器。

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

为了露出阴影图像并产生阴影效果（见图3-13），需要使用负值的空白边偏移这个图像：

. img-wrapper img{
 margin: -5px 5px 5px -5px;
}

图3-13  应用了阴影的图像

还可以给图像加上边框和一些填充，从而产生类似照片边框的效果（见图3-14）：

图3-14  最终结果

这种技术对于大多数符合标准的现代浏览器都是有效的。但是，为了在IE 6中产生正确的效果，还需要添加两个简单的规则：

 阴影效果现在可以在IE 6中实现了。在IE 5.x中，不显示图像上的填充，但是这是个小问题，可以不用理会。

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

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

精通CSS-洋葱皮阴影

精通CSS-简单的CSS阴影

精通CSS-模糊阴影

精通CSS-山顶角

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