如何用CSS实现图片中的文字描边发光效果？

你当前用的是容器的box-shadow，这是给整个div矩形区域加阴影，和文字轮廓无关，自然达不到文字发光的效果。要实现文字的弥散发光效果，得针对文字本身使用text-shadow，必要时配合filter: drop-shadow()增强。

基础文字发光实现 #

直接给文字添加多层text-shadow，通过调整模糊半径和透明度来营造渐变发光：

<div style="
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 
    0 0 20px rgba(119,45,239,0.8),
    0 0 40px rgba(119,45,239,0.6),
    0 0 60px rgba(119,45,239,0.4);
">Javascript</div>

增强版弥散发光 #

如果需要更强烈、更自然的弥散效果，搭配filter: drop-shadow()（它会跟随文字轮廓生成阴影）：

<div style="
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(119,45,239,0.8);
  filter: 
    drop-shadow(0 0 40px rgba(119,45,239,0.6))
    drop-shadow(0 0 60px rgba(119,45,239,0.4));
">Javascript</div>

关键说明 #

• text-shadow直接作用于文字，多层叠加能模拟出由强到弱的发光渐变。
• filter: drop-shadow()的阴影会贴合文字边缘，适合补充更外层的弥散效果，避免box-shadow那种矩形硬边。
• 可根据需求调整font-size、阴影的模糊半径（第三个数值）和透明度（rgba最后一位），匹配设计图的效果。

内容的提问来源于stack exchange，提问作者chanel stroke