CSS阴影效果Ⅱ：模糊阴影

CSS阴影效果Ⅱ：模糊阴影
CSS Drop Shadows II: Fuzzy Shadows

作者：Sergio Villarreal http://www.alistapart.com/authors/sergiovillarreal/
原文地址：http://www.alistapart.com/articles/cssdrop2/
原文发表日期：2004年4月23日
翻译：Breeze
发布日期：2004年12月9日

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

screen.width-500)this.style.width=screen.width-500;" border=0>此主题相关图片如下：
screen.width-500)this.style.width=screen.width-500;" border=0>

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

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

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

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

screen.width-500)this.style.width=screen.width-500;" border=0>此主题相关图片如下：
screen.width-500)this.style.width=screen.width-500;" border=0>

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

标签中嵌入图像/块元素。

  

    
  

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

screen.width-500)this.style.width=screen.width-500;" border=0>此主题相关图片如下：
screen.width-500)this.style.width=screen.width-500;" border=0>

　　这个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中仅需要一个围绕在图像外的

标签来设置模糊阴影，并且在其它浏览器中显示的是硬边线。并非是作为差劲的浏览器行为的奖赏，我们坚持使用额外的

标签，这样每个太阳底下的浏览器都能产生模糊的阴影。
　　另外，我们将

的背景设置为空是为了移去我们之前在CSS中指定的GIF偏移。因为这个文件我们仅仅是为IE5.5和IE6定制的，IE5保持了GIF偏移（并且因而显示一个硬的边缘阴影）。其它的浏览器可以用我们在先前的文章（http://www.alistapart.com/articles/cssdropshadows/）中列出的!important方法来跳过GIF文件。

条件注释

　　将ie.css这个样式表在所有不需要它的浏览器中隐藏，我们要用到条件注释—一种微软提供给特定版本IE浏览器的技术。他们包含在HTML文档中，而且看起来也像标准的HTML代码，除了IE5+外的浏览器都会忽略他们（W3C的校验器也一样）。我们将这些代码插入到文档的区，为阴影创建的CSS后面。

　　更确切的说，附加的这段代码说明这是版本号大于或等于5.5（因为版本向量的缘故必须详细说明是5.5000 Version_Vectors）的IE浏览器，因而为IE5.5和IE6定制了一个专门的样式。
　　模糊阴影的实现方法到这里就全部列出来了。看起来完成这样一个模糊阴影似乎是极其复杂的，但另一方面，他们会说“上帝生活在细节之中” ［译注：似乎是个名言来着］。另外，提及的这个技巧能够用来实现各种各样的效果。

　　这里有只猫：

screen.width-500)this.style.width=screen.width-500;" border=0>此主题相关图片如下：
screen.width-500)this.style.width=screen.width-500;" border=0>