JQuery实现可调整大小的投影效果

Question

我正在寻找一个支持为 div、table、文本等添加可调整大小的投影阴影的 JQuery 插件。当用户调整浏览器窗口大小时，我只希望阴影能够随之调整大小（具有阴影的元素不可拖动）。

我已经尝试了 this plugin，但似乎无法在用户缩小浏览器窗口时缩小阴影的宽度。

谢谢， Don

- Dónal

---

当浏览器窗口大小改变时，阴影调整/移动所需的时间也会延迟 - 在我看来，它看起来相当糟糕。 - Russ Cam

是的，这并不是很令人满意，但它是在这里得到最高投票的解决方案： https://dev59.com/GXVC5IYBdhLWcg3w2lCI - Dónal

Answer 1

如果阴影并不是非常重要的话，我建议你可以使用CSS3的盒子阴影。它们在除IE外的大多数主流浏览器的最新版本都得到了支持。

-moz-box-shadow: 4px 4px 8px #000;
box-shadow: 4px 4px 8px #000;

关于：http://www.css3.info/preview/box-shadow/ 使用JS生成的阴影（例如使用jQuery生成的阴影）的问题在于它们生成速度非常慢。它们逐像素生成，附加了大量标记到DOM中。如果您在浏览器调整大小时重新生成它们，它会消耗用户的CPU资源。

如果您勇敢地想要具有可调整大小的阴影，无论用户使用什么浏览器，另一种方法是使用图像和CSS来构建阴影。这种方法完全支持调整大小： http://www.alistapart.com/articles/cssdrop2/

- brianreavis