应用投影的最佳方法是什么？答案

【问题标题】：What's the best way to apply a drop shadow?应用投影的最佳方法是什么？
【发布时间】：2008-10-27 13:04:14
【问题描述】：

应用投影的最佳方法是什么？我现在正在一个网站上工作，我们有很多这样的网站，但是，我一直在努力寻找最好的方法来做到这一点。该网站的动画非常繁重，因此阴影需要很好地处理它。

我尝试了一个 jQuery 阴影插件。阴影看起来不错且易于使用，但速度较慢且不适用于任何动画（需要大量重绘，非常缓慢）。

我还尝试创建自己的 jQuery 扩展，将我的元素包装在几个灰色 div 中，然后稍微偏移它们以产生阴影效果。这运作良好。它快速响应动画。但是，由于所有内容都包含在这些阴影 div 中，因此它使 DOM 操作/遍历变得很麻烦。

我知道必须有更好的方法，但这并不是我的强项。想法？

【问题讨论】：

这是很难在所有浏览器中有效工作的事情之一，并且性能不错。我希望随着 IE9（是 9）开始支持 CSS3，这将是一个已解决的问题，但对于 IE6、IE7 和 IE8，您会发现这非常困难。
你检查stackoverflow.com/questions/165446/…了吗？

【解决方案1】：

ShadedBorder 是一个外观漂亮且易于使用的 Shadow-Library。看看吧

【讨论】：

【解决方案2】：

您不需要将这些 shadow-div 包裹在其他内容周围，只需将它们稍微倾斜并放置在较低的 z-index 上！-)

【讨论】：

【解决方案3】：

如果您的主要问题是导航 DOM，只需向您的元素添加一个类和/或 id，并使用 JQuery 选择器引用它。如果将 ref 存储在变量中会更好，因此您不需要过于频繁地选择它

【讨论】：

【解决方案4】：

虽然它还没有完全的跨浏览器支持，但您可能想尝试使用CSS 3 text-shadow property。

【讨论】：

【解决方案5】：

这在很大程度上取决于您的图像需要多久更换一次，以及它们将覆盖的彩色区域。因为我猜您需要注意 IE6 合规性，所以大多数 alpha-PNG 解决方案会导致如此可怕的抖动，以至于您在性能优化上花费的时间比您想猜测的要多。

过去为了解决这个问题，由于我们的图像每月修改不到一次，我们通过缓存 PHP 脚本调用图像，该脚本使用预定义的背景颜色自动应用阴影，因此我们不必依靠任何透明度。这会导致更快的下载（更少的 HTTP 请求）和更快的界面，因为工作中的 Javascript/CSS 魔法更少。

我知道这是一个非常老派的解决方案，如果您的图像是静态的，上述解决方案将完全可以接受，但跨浏览器兼容和动画可能会迫使您做这种风格的解决方案。

【讨论】：