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

题

应用阴影的最佳方法是什么？我现在在一个网站上工作，我们有很多这样的网站，但是，我一直在努力寻找最好的方法来做到这一点。该网站的动画很重，因此阴影需要与此配合良好。

我尝试了一个jQuery阴影皮肤。阴影看起来很好并且易于使用，但速度很慢，并且不适用于任何动画（需要大量重绘，非常慢跑）。

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

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

解决方案

ShadedBorder 是一款外观漂亮且易于使用的Shadow-Library。检查出来

其他提示

你不需要将那些shadow-div包裹在其他内容周围，只需稍微设置它们并将它们放在较低的z-index上！ - ）

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

虽然尚未获得完整的跨浏览器支持，但您可以尝试使用 CSS 3 text-shadow属性。

这在很大程度上取决于您的图像需要更改的频率，以及它们将覆盖的彩色区域。因为我猜你需要注意IE6的合规性，所以大多数alpha-PNG解决方案会引起如此可怕的紧张情绪，以至于你会花费更多时间进行性能优化，而不是你想要猜测的。

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

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

许可以下： CC-BY-SA 和归因