用text-shadow模拟霓虹发光效果需至少3层递增模糊半径与衰减颜色的叠加，如'0 0 8px #ff00de, 0 0 16px #ff00de, 0 0 24px #c700a8'，tailwind须通过theme.extend.textshadow手动扩展，禁用shadow-lg或drop-shadow因二者不支持分层控色与偏移。
如何用 text-shadow 模拟霓虹发光效果
Tailwind 本身不提供「霓虹文字」的预设类，必须手动扩展 text-shadow。直接写 text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de 这类多层阴影才是关键，Tailwind 的 shadow- 系列只控制组件整体投影，对文字无效。
实操建议：
- 在
tailwind.config.js的theme.extend.textShadow下添加自定义值（注意：Tailwind v3.4+ 才原生支持textShadow扩展；旧版本需用extend: { textShadow: { ... } }+ 插件或手动加 CSS） - 推荐值命名要带颜色和强度，比如
'neon-pink': '0 0 8px #ff00de, 0 0 16px #ff00de, 0 0 24px #c700a8'，避免用模糊的sm/md - 别只加一层阴影——霓虹感依赖至少 3 层递增的模糊半径和衰减的颜色亮度，否则看起来像普通发光
为什么不能直接用 shadow-lg 或 drop-shadow
shadow-lg 是给元素 box 添加的投影，作用在文字外框上，文字本身无发光；drop-shadow() 是 filter 函数，用于 SVG 或图片，对内联文本支持差（尤其 Safari），且无法分层控制每层偏移与颜色。
常见错误现象：
- 写了
class="shadow-lg text-pink-500"，结果只有文字下方一块灰影，毫无霓虹感 - 在
filter: drop-shadow(...)里套多个值，但浏览器只认最后一个，其余被忽略 - 用
text-stroke想描边增强对比，却导致文字边缘发虚、小字号下锯齿严重
怎样让霓虹文字在深色/浅色背景上都可用
霓虹效果强依赖背景反差。同一组 text-shadow 值在黑底上炫酷，在白底上可能完全看不见，或变成脏污光晕。
使用场景与适配建议：
- 深色背景（
bg-gray-900）优先用高饱和色：粉红#ff00de、青蓝#00eeff、紫红#b967ff - 浅色背景（
bg-white）改用冷调低饱和色 + 更强扩散，例如'neon-cyan-light': '0 0 12px rgba(0,238,255,0.6), 0 0 24px rgba(0,238,255,0.4)'，避免荧光色直接怼白底 - 不要试图用同一 class 通吃——用
dark:text-neon-pink配合dark:bg-gray-900显式切换更可靠
性能与可访问性容易被忽略的点
多层 text-shadow 对渲染性能影响极小，但有两个真实问题常被跳过：
- 高对比度模式（Windows / macOS 系统级设置）会强制抹掉所有
text-shadow，此时文字只剩本色，若本色与背景对比不足（如浅粉字配浅灰底），文字直接不可读 - 屏幕阅读器不感知阴影，但用户如果禁用 CSS 或用纯文本渲染，你得确保文字内容本身语义完整，别靠发光传递关键信息（比如仅用发光表示“必填”）
- 移动端低端机上，超大模糊值（如
0 0 40px）可能引起轻微重绘卡顿，建议把最大模糊控制在24px以内
最麻烦的是调试时你盯着发光效果看半天，却忘了关掉系统高对比度模式验证一遍——那才是用户真实遇到的第一道门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
