javascript - 有没有什么方法可以让网页在没有 CSS box-shadow 的情况下微微发光？

Question

我正尝试高效地

编写复杂的界面功能代码

我正在尝试编写一个界面，我在该界面上应用了像这样的宽泛微弱的光(抱歉，黑暗的例子):

---

到目前为止我尝试了什么

我考虑过 outer-glow、filter 和 canvas 解决方案，但它们似乎都无法提供可行的高性能结果:

• outer-glow:在技术上完全符合我的要求。

但是 严重 会损害性能，尤其是宽发光。

• 过滤器:我只知道执行此操作的模糊过滤器，除了模糊并不是真正的发光 - 它会严重模糊边缘。如果我要复制 DOM，它在技术上完全符合我的要求，模糊副本，将其放在实际 DOM 的前面，应用低不透明度，pointer-events:none，并将其保留在通过 JavaScript 与非模糊 DOM 同步。

但是将 DOM 加倍并复制 DOM 中的所有事件不仅会造成很大的困惑，而且可能会严重损害性能。

• Canvas :我可以将 DOM 写入覆盖的低不透明度 Canvas 并对其进行模糊处理。

但是(除非有一种方法可以读取整个窗口渲染并将其直接输入 Canvas )这涉及到一个复杂的、错误的(安全障碍和对功能)将所有 DOM 元素渲染为 SVG 的过程，我仍然必须保持 DOM 的 Canvas 版本与实际 DOM 同步，这将是一团糟。

---

我的问题

所以我没有想法。 有什么方法可以让我的界面以高效的方式发光？

我对此并不抱太大希望，但我确实想伸出援手，看看我没有想到的滤镜、 Canvas 或其他一些技巧是否可以在 Web 应用程序中实现这种发光效果，同时保留表现。

Answer 1

这可能不是您真正想要的路线，但它能够产生您想要的结果。这种方法肯定是您可以采用的最高效的方法，但是您当然必须更新设计。

设计更新方法
您可以从设计方面而不是编码方面来解决这个问题。因此，而不是编写代码。您会弄清楚元素的最终目标颜色是什么并修改您的 css。您可能还需要修改一些图像。