有没有办法在没有 CSS box-shadow 的情况下让网页微微发光？

Question

我正在尝试编写一个严格的界面功能高性能

我正在尝试编写一个界面，我会在上面应用像这样的宽泛而微弱的光晕（黑暗的例子，抱歉）：

---

到目前为止我已经尝试过什么

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

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

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

• 过滤器：我只知道这样做的模糊过滤器，除了模糊不是真正的发光 - 它会严重模糊边缘。如果我要复制 DOM、模糊副本、将其放在实际 DOM 前面、应用低不透明度 pointer-events:none 并通过 JavaScript 使其与非模糊 DOM 保持同步，它在技术上会完全按照我的意愿行事.

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

• canvas：我可以将 DOM 写入一个覆盖的低不透明度画布并对其进行模糊处理。

但是（除非有办法读取整个窗口渲染并将其直接输入到画布中）这涉及一个复杂的、有缺陷的（安全障碍和对功能）将所有 DOM 元素呈现为 SVG 的过程，我仍然必须保持 DOM 的画布版本与实际 DOM 同步，这将是一团糟。

---

我的问题

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

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

Answer 1

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

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