[分享]css发光字不能用

CSS中的发光字应该是前端设计师非常熟悉的一个特效，其可以通过文本的外观使其看起来像是发出了光芒。尽管这个特效看起来非常酷，但是它并不能在所有的浏览器和设备上都正常的显示。.text { fontsi...

CSS中的发光字应该是前端设计师非常熟悉的一个特效，其可以通过文本的外观使其看起来像是发出了光芒。尽管这个特效看起来非常酷，但是它并不能在所有的浏览器和设备上都正常的显示。

.text {
  font-size: 50px;
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
} 

其中text-shadow属性是实现发光字的关键，它定义了一系列的文本效果来使其看起来像是发出了光芒。然而，这个属性在一些老的浏览器中并不支持，例如IE11及其以下版本都不支持这个特效。

因此，如果你想使用发光字的效果，你需要优雅降级。这意味着在不支持的浏览器中，你需要提供不同的代码或者效果。在这种情况下，你可以选择使用纯CSS的解决方案，例如text-fill-color和background-clip属性来模拟发光字。

.text {
  color: #fff;
  background: linear-gradient(45deg, #ff00de, #00fff6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 

这个解决方案使用了渐变背景和text-fill-color和background-clip属性结合实现了和text-shadow类似的效果，但是它可以在更广泛的浏览器中使用，而不会出现显示问题。

综上所述，如果你想在你的网站中使用发光字特效，你需要优雅降级并使用非常强大的CSS实现方式。只有这样，你才能确保你的网站在所有浏览器和设备上都能正常显示。