text-shadow 语法要求四值顺序为水平偏移、垂直偏移、模糊半径、颜色，错误顺序或缺值将失效；支持多层逗号分隔、none 清除、0 模糊实现描边；高亮需控制模糊与透明度；存在性能、对比度、深色模式适配及可访问性问题；复杂场景需 DOM 方案替代。
text-shadow 语法结构与基础写法
直接写 text-shadow 时，浏览器 只认四个值的顺序：水平偏移、垂直偏移、模糊半径、颜色。少一个或顺序错，整条声明就失效。
常见错误是把颜色放前面，比如 text-shadow: #ff6b6b 2px 2px 4px; —— 这会完全不生效，因为浏览器按“长度值”解析，遇到颜色就停了。
- 正确写法：
text-shadow: 2px 2px 4px #ff6b6b; - 支持多层阴影，用逗号分隔：
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; - 设为
none可清除所有阴影：text-shadow: none; - 模糊半径为
0时等效于硬边投影，适合做文字描边效果
用 text-shadow 实现文字高亮（非 background）
所谓“高亮”，不是加背景色，而是模拟荧光笔划过的效果——靠叠加一层浅色、大模糊、低偏移的阴影来实现视觉膨胀感。
关键在控制模糊半径和透明度：太大显得脏，太小没存在感；纯白容易发灰，带点色相更醒目。
立即学习 “ 前端免费学习笔记（深入）”；
- 基础高亮：
text-shadow: 0 0 8px rgba(255, 255, 0, 0.6); - 双层增强（内亮 + 外晕）：
text-shadow: 0 0 4px #ffeb3b, 0 0 12px rgba(255, 235, 59, 0.4); - 慎用
inset：CSS 标准里text-shadow不支持inset，写了也无效
性能与可访问性隐患
text-shadow 在低端设备或大量文本节点上可能触发 重绘 卡顿，尤其当模糊半径 >10px 或叠加超过 3 层时。
更隐蔽的问题是对比度下降：高亮阴影会让浅色文字在浅底上更难读，WCAG 2.1 对文本对比度有明确要求（至少 4.5:1），而阴影会干扰自动检测 工具 的判定。
- 避免在
body或全局p上批量启用高亮式text-shadow - 深色模式下记得重置阴影颜色，否则
rgba(255,255,0,0.6)在黑底上会过曝 - 用
prefers-reduced-motion媒体查询关闭动态阴影（如呼吸式脉动效果）
/* 示例：响应式高亮，兼顾深色模式 */ .highlight {text-shadow: 0 0 6px rgba(255, 215, 0, 0.7); } @media (prefers-color-scheme: dark) {.highlight { text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } } @media (prefers-reduced-motion: reduce) {.highlight { text-shadow: none;} }替代方案与边界场景
当需要精确控制高亮区域（比如只高亮关键词、不连带空格）、或要支持选中后保留高亮时，text-shadow 就力不从心了。
此时得切到 DOM 层：用 span 包裹目标文字，再配 background: linear-gradient() 或 box-decoration-break: clone 来维持跨行高亮连续性。
-
text-shadow无法跟随文字选中状态变化 - 不能设置圆角或 padding 式留白，高亮边缘永远紧贴字形
- Webkit 内核对多层阴影的渲染精度略高于 Firefox，但差异通常可忽略
实际项目里，先用 text-shadow 快速验证视觉效果，再根据是否需交互、是否跨行、是否进无障碍清单，决定要不要升级到 DOM + CSS 背景方案。
