精通CSS-模糊阴影

模糊阴影

前两种方法提供了创建阴影效果的简单方式。但是，对它的主要批评意见是阴影的边缘看起来很硬。如果在Photoshop这样的图形软件中创建阴影效果，那么边缘会淡入背景，产生更加自然的效果。在图3-15中可以看到这两种效果的对比。

图3-15  一些人不喜欢前面的技术产生的生硬边缘，希望更有真实感

幸运的是，通过使用PNG和蒙板并添加一个无语义的div，可以实现这种效果。这个方法创建一个具有alpha透明度的PNG来盖住阴影图像的边缘。

首先需要建立蒙板PNG。创建一个新的800×800像素的Photoshop文件。删除背景层的内容，然后在左边缘上建立一个5像素宽的选区。在这个选区中填入从白色到透明的渐变。在图像顶部建立5像素高的选区，同样填入渐变。最终的图像在顶部和左边形成模糊的白色边缘，见图3-16。现在，将这个文件保存为24位的PNG并且命名为mask.png。

图3-16  这个PNG的透明边缘将盖住阴影图像的角，形成柔和的角

不幸的是，老版本的IE不支持PNG alpha透明度。为了适应这些浏览器，需要创建一个替代图像。我创建一个简单的GIF蒙板，它的左边和顶部填充5像素宽的白色。

这种技术的标记如下：

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

要实现这个效果，首先需要将阴影图像应用于img-wrapper div，将它对准右下角： 

接下来，将蒙板图像应用于内层div的右上角。这会将蒙板图像盖在阴影图像的上面，蒙住生硬的左边缘和上边缘，形成柔和的边缘。目前，这两个背景图像都被主图像盖住了。要进行偏移，只需在内层div的底部和右边应用一些填充：

你会注意到，我将PNG和GIF都应用于这个规则。这是为了同时适应支持PNG alpha透明度的新型浏览器和不支持它的IE版本。通过使用!important招数，比较现代的浏览器将显示PNG，而IE用户会看到GIF。关于这个招数的更多信息，请参阅第8章。

如果浮动元素包含块级元素，那么Mac上的IE 5.2不对它们进行“收缩包围”。为了解决这个问题，只需同时浮动第二个和第一个div：

最后，在图像元素上添加边框效果：

把所有这些步骤组合在一起，完整的CSS像下面这样：

.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 ;
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;
}

最终的效果应该像图3-17这样。

图3-17  最终效果

如果愿意的话，采用这样的效果就可以了，为好浏览器提供PNG，为其他浏览器提供GIF。不幸的是，正如大家知道的，IE占据的市场份额非常大，所以能够实际看到这种模糊阴影的人非常少。

幸运的是，IE 5.5和更高版本提供了一些专有的CSS，可以实现PNG透明度：

可以将这些代码添加到现有的CSS文件中，并且使用IE专有招数对好浏览器隐藏它。但是，这会使CSS文件失效。另外，除非绝对必要，应该设法避免使用招数。更合适的方法是将规则放在一个单独的CSS文件中，然后对除IE之外的其他浏览器隐藏它。为此，创建一个新的CSS文件ie55.css并且添加以下代码：

第一个规则使用IE专有的AlphaImageLoader过滤器在IE 5.5和更高版本中显示具有alpha透明度的PNG。原来的背景图像仍然会显示，所以第二个规则隐藏原来的背景图像。

IE还有另一段称为有条件注释（conditional comment）的专有代码，它允许向IE的特定版本提供特定样式表。在这个示例中，只希望让IE 5.5和更高版本看到这个新的样式表，所以在页面的开头添加以下代码：

目前不需要为有条件注释太担心，在第8章中将详细讨论它们。

这样就行了。所有现代浏览器以及IE 5.5和更高版本都会显示柔和的阴影。其他浏览器将显示硬角的阴影。

创建能够在所有浏览器中工作的基本页面，然后为比较现代的浏览器添加高级样式或功能，这种概念称为渐进式改进（progressive enhancement）。与之相反，确保页面的样式或功能在老式浏览器中不会造成严重的问题，这称为平稳退化（graceful degradation）。这两个概念在基于标准的设计中非常重要。

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

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

精通CSS-洋葱皮阴影

精通CSS-简单的CSS阴影

精通CSS-模糊阴影

精通CSS-山顶角

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