LSDN

Lynn Studio Documents Network

• 作者：Sergio Villarreal@A List Apart
• 原载：A List Apart
• 翻译：Breeze

我们喜欢阴影。我们乐于给他们制造阴影并且我们爱好CSS和网页标准，于是我们写下了CSS阴影效果这篇文章。来自头脑中的一个微弱的声音满意于它，我想那就是它结束的原因。我们错了。Internet已经成为了一种媒介，在发表那篇文章后的数分钟后，我们开始收到改进这种方法的注解、质疑和提议。最值得注意的是Phil Baines的方法，能够处理段落的阴影而又使标记不失简易。太感谢他了。对这种投影技巧的抱怨大部分来自于一个问题，上边缘和左边缘的阴影太明显啦，虽然通常能够接受，但是这的确不像是一个图像编辑软件所生成的（模糊阴影）。给定的投影图像是能够有效的省略那一部分点的，我们感到不可避免的麻烦，主要原因应归结于IE浏览器处理PNG格式图片透明度上的天生无能。

Jan指出了一种可以正确的补偿IE浏览器的Alpha通道的技术。这种方法使用的是基于Explorer的AlphaImageLoader滤镜（ALA中的讨论），但是无需JavaScript代码的协助。这简直就是上帝的恩赐。结合这种技术、一些图像欺骗手段和我们伪造阴影偏移的方法，我们将可以制造出能跨浏览器工作的合适的模糊阴影。

在这篇文章中，我们将学到:

1. 在非IE浏览器里隐藏一些样式使其不会影响文档确认
2. 强迫IE5.5/IE6正确的显示PNG透明度
3. 为我们的阴影效果应用前面提到的模糊阴影边缘

首先，需要伪造我们的模糊阴影边缘。这样，我们必须先在图像编辑软件中创建出一个反转阴影。通常我们放置一个黑色的阴影在一种背景颜色上。为了有个好的效果，我们需要一个有颜色的阴影，而且颜色必须是与背景之上我们将要应用到的一样。以一个图像如“伪造阴影偏移”开始，我们在早先的文章中描述过。这次的阴影将比上次的来得稀薄（大约3px宽度6px大小的阴影还不错）。我们在例子中将使用白色作为背景颜色。当然你可以对其进行调整来适应自己的需求。我们将在这个图像上应用我们的“阴影”，注意要指定白色为阴影色。一个浓的阴影是赏心悦目的，阴影越浓，你的阴影看起来似乎褪色得越快。我们现在将要做的就像下面这样。

将这个图片保存为全透明度的PNG格式，我们将会用在IE5.5、IE6和任何标准适应的浏览器上。制作一个标准的厚偏移量无阴影版本并且将它保存为GIF格式的文件。我们要将其应用到IE5（不支持AlphaImageLoader滤镜）上。这里有两个范例文件：PNG/GIF（使用图像编辑软件来查看这两个图片吧，因为它们在你的浏览器上看起来像一个白色在另一个白色上面）。因为我们有一个纯色在偏移的边缘，事实上我们放弃了透明阴影的可能，所以我们将使用一个简单的GIF图片。确信你将这个效果应用到了你将使用的背景颜色上。这里是我们的阴影范例：GIF。这个效果的标记就是在两个标签中嵌入图像块元素。

<div class="alpha-shadow"><div>
<img src="img/test.jpg" alt="just a test" />
</div></div>

基本的技术仍然还是一样的: 我们设置伪造偏移（以及它的翻转阴影）为里面那个div的背景，然后阴影为外面那个div的背景。它们交叠的时候，透明的PNG看起来像在逐渐溶解阴影图像，直到变成纯的背景颜色。而聪明之处在于这些是在Explorer中进行的。

这个CSS非常接近我们在早先的文章中看到的那个：

.alpha-shadow {
	float: left;
	background: url(img/shadow1.gif) no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}

.alpha-shadow div {
	background: url(img/shadow2.png) no-repeat left top !important;
	background: url(img/shadow2.gif) no-repeat left top;
	padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	padding: 4px;
}

如果你够仔细，你会发现我们仍然包含着用来做里面那个div背景的非模糊GIF偏移，这有助于不支持AlphaImageLoader滤镜的IE5.0。事实上是这样，这个代码能应用到所有版本的Explorer中。针对IE5.5/6，我们要创建一个额外的CSS文件来进行调整。

ie.css

首先我们包含一个CSS文件并且命名为ie.css，以使激活AlphaImageLoader滤镜来得简单而可靠。我知道这是不那么体面的，并且或许会使得标准班贴个价钱在我们头上（译注: 作者似乎在开一个玩笑，不幸的是咱没懂:-)），但是我们等下会从其他浏览器中隐藏这个文件，那么就一切OK了。我们的ie.css样式看起来是这样：

.alpha-shadow div {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader（src='img/shadow2.png'，sizingMethod='crop'）;
	background: none;
}

AlphaImageLoader滤镜支持两个缩放方法: crop和scale。我们将为偏移应用crop方法（scale将整个图像定义为块，这不是我们所期待的）。既然滤镜有点有限并且不支持类CSS的图像设置，那么我们坚持将阴影顺移到图像的右下（图像的默认位置自始至终是在左上）。我们要注意到，因为这个滤镜将图像放到块元素的前景更胜于放到背景，这个技术在Explorer中仅需要一个围绕在图像外的<div>标签来设置模糊阴影，并且在其它浏览器中显示的是硬边线。并非是作为差劲的浏览器行为的奖赏，我们坚持使用额外的<div>标签，这样每个太阳底下的浏览器都能产生模糊的阴影。另外，我们将<div>的背景设置为空是为了移去我们之前在CSS中指定的GIF偏移。因为这个文件我们仅仅是为IE5.5和IE6定制的，IE5保持了GIF偏移（并且因而显示一个硬的边缘阴影）。其它的浏览器可以用我们在先前的文章中列出的!important方法来跳过GIF文件。

<!--[if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->