text-shadow实现发光和描边需严格参数控制：发光须2–3层零偏移、模糊半径递进（如2px/6px/12px）、透明度逐层衰减；描边需8层±1px偏移、blur-radius为0、文字色设transparent；高对比度模式下失效，多层叠加易卡顿，safari兼容性差。
text-shadow 能做发光和描边，但不是“开个开关就亮”，它本质是投影，参数稍错就糊、偏、漏底或卡顿。
发光效果：别只写一层大模糊
单层 text-shadow: 0 0 20px #fff 看着像发光，实际边缘发虚、Retina 屏上像素溢出、暗色背景上文字膨胀难读。
- 真正可用的发光是 2–3 层叠加：第一层
0 0 2px rgba(255,107,107,1)（内核），第二层0 0 6px rgba(255,107,107,0.8)（主体），第三层可选0 0 12px rgba(255,107,107,0.4)（柔化外缘） - 模糊半径必须严格递进，不能跳着写（比如 2px → 10px → 6px）；透明度逐层衰减，否则光晕生硬
- hover 动画中频繁改
text-shadow值会重绘卡顿，低端设备明显；可加will-change: text-shadow或换用filter: drop-shadow()（注意后者作用于整个盒，不是纯文字）
彩色描边：8 层 0 模糊是硬门槛
描边不是“多加几圈颜色”，text-shadow 是投影，没填满方向就会漏白底、显锯齿、在 Safari 上丢影。
- 必须写满 8 个方向：
-1px -1px 0 #f00, 0 -1px 0 #f00, 1px -1px 0 #f00, 1px 0 0 #f00, 1px 1px 0 #f00, 0 1px 0 #f00, -1px 1px 0 #f00, -1px 0 0 #f00 - 所有
blur-radius必须为0，哪怕写成0px都可能被某些旧 Safari 解析失败；偏移量只能是 ±1px，±2px 就断连 - 文字色建议设为
color: transparent，靠描边显形；否则内外色差+抗锯齿干扰，视觉错位明显 - iOS Safari（尤其 iOS 15–16）对
transparent+ 多色描边支持不稳定，真机必测；降级方案是用实色文字 + 单色描边（如color: #000; text-shadow: ... #fff）
兼容性与可访问性：高对比度模式下它直接消失
这不是 bug，是 Windows 系统级策略——开启高对比度模式后，Chrome/Firefox/Edge 都会强制禁用 text-shadow，发光和描边全无。
- 无法 CSS 绕过，JS 也检测不到该状态（
window.matchMedia('(forced-colors: active)')可用但不覆盖所有场景） - 白字黑底 + 白光组合最容易翻车：阴影太厚会让文字在暗背景下显得“浮肿”，实测可读性反而下降
- 超过 12 层阴影，在 Android WebView 或低端平板滚动时可能触发重绘抖动；Safari 对 >6 层渲染稳定性弱于 Chrome
什么时候该放弃 text-shadow？
当你要精确控制光晕形状、配合 SVG 图标统一风格、或让描边随字号缩放时，text-shadow 就力不从心了。
- 图标+文字组合发光：用 SVG 的
<filter></filter>+<fedropshadow></fedropshadow>更一致 - 文字带描边又发光：
text-stroke和text-shadow叠加容易错位，优先考虑paint-order: stroke fill+filter - 响应式发光强度：
text-shadow的像素值不会自动缩放，得用calc()或 JS 动态算（比如text-shadow: 0 0 calc(0.1em) #ff6b6b）
真正难的不是堆参数，而是每层模糊半径是否严格递进、每层透明度是否逐层衰减、每个方向是否填满不留空——这些细节一错，效果就从“炫酷”变成“糊成一团”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
