单层text-shadow无法模拟霓虹灯强中心光+多层衰减外晕+微色偏的物理特性，易导致边缘发虚、光晕不聚焦；必须用3–4层（最多不超过5层）递进式text-shadow叠加，每层模糊半径、颜色饱和度与透明度需严格匹配光衰曲线，否则失真。
为什么直接用 text-shadow 做霓虹灯容易发虚或失真
纯靠一层 text-shadow 模拟霓虹，实际效果常像“糊掉的荧光笔”——边缘松散、光晕不聚焦。真正霓虹灯的光效是强中心光 + 多层衰减外晕 + 微弱色偏，CSS 里得用 4–6 层 text-shadow 叠加，且每层半径、模糊度、颜色都要递进调整。别偷懒只写两层，那只是发光字，不是霓虹。
常见错误是所有阴影用相同 blur 值，结果光晕齐平堆叠，缺乏纵深感。正确做法：内层（1–2px 模糊）用高饱和蓝/紫定主色，中层（4–8px）用稍淡同色系扩大光晕，外层（12–20px）用极淡灰紫收尾，模拟真实气体放电的光衰曲线。
怎么用 @keyframes + hue-rotate() 实现呼吸式色相流动
霓虹灯管通电后会有轻微色温浮动，CSS 里用 hue-rotate() 动画最贴近这种物理特性。但直接对文字整体加动画会显得生硬，建议只作用于外层阴影，让光晕“呼吸”，文字本体保持稳定色调。
- 动画周期控制在
8s–12s，太快像频闪，太慢看不出变化 -
hue-rotate(0deg)→hue-rotate(15deg)→hue-rotate(0deg)足够，幅度超 20deg 容易变脏色 - 必须搭配
animation-timing-function: ease-in-out，线性过渡会失去灯管启停时的柔和渐变感
示例关键帧：
@keyframes neon-pulse {<br> 0%, 100% { filter: hue-rotate(0deg); }<br> 50% { filter: hue-rotate(12deg); }<br>}
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
兼容性陷阱：哪些浏览器会把多层 text-shadow 渲染成“毛边块”
Safari 15.4 之前版本、旧版 Edge（基于 EdgeHTML）、部分安卓 WebView 对超过 4 层 text-shadow 的抗锯齿处理异常，文字边缘会出现像素级抖动或色带。这不是 bug，是渲染管线对多重模糊叠加的优化取舍。
实操建议：
- 用
@supports (text-shadow: 0 0 1px #000)做基础检测，但别依赖它判断多层支持度 - 对 Safari 用户降级：用 3 层阴影 + 单色
hue-rotate动画，放弃外层淡紫晕 - 移动端务必测试 Chrome for Android 11+，某些定制 ROM 的 Skia 渲染器会对 >5 层阴影强制合并，导致光晕变硬
性能敏感点：动画触发重绘的隐性开销在哪
很多人以为 filter: hue-rotate() 是 GPU 加速的，但实际在文字上启用时，Chrome 会退化为 CPU 渲染——尤其当文字有透明阴影或使用了 will-change: filter。更隐蔽的问题是：多层 text-shadow 本身就会增加合成层复杂度，叠加动画后，页面滚动时可能掉帧。
压测验证方式：
- 打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，观察文字区域是否高频闪烁（说明频繁重绘）
- 若闪烁严重，改用
transform: translateZ(0)强制升层，比will-change更稳妥 - 文字内容动态更新时（比如实时计数器），避免对整个
<span></span>应用动画，改用伪元素::after承载霓虹效果，主体文字保持静态
真正难的不是调出效果，而是让光晕在不同设备上既稳定又轻量——灯管亮着，但别让显卡冒烟。
