应使用text-shadow实现文字阴影，其语法为h-offset v-offset blur-radius color，顺序不可颠倒；多组阴影逗号分隔，前层在下、后层在上；常见失效原因包括父容器overflow:hidden、文字颜色透明、字体抗锯齿干扰及伪元素未单独设置等。
直接用 text-shadow，别碰 box-shadow —— 后者只作用于元素框，对文字本身没效果。
text-shadow 的语法和参数顺序
text-shadow 接收一组或多组值，每组是 h-offset v-offset blur-radius color，用空格分隔，多组之间用逗号隔开。顺序不能错，blur-radius 和 color 可选但位置固定。
- 省略
blur-radius时，阴影边缘锐利（比如text-shadow: 2px 2px #000;） - 颜色必须写在最后，写成
text-shadow: 2px 2px #000 2px;是无效的 - 多个阴影叠加时，前面的在下层，后面的在上层（类似图层顺序）
常见失效原因：继承、透明色、父级裁剪
明明写了 text-shadow 却看不到？大概率不是语法错，而是这些场景：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设置了
overflow: hidden，而阴影超出边界被裁掉了 - 文字颜色是
transparent或rgba(0,0,0,0)，阴影跟着“不可见”——text-shadow不会自己显形，它依赖文字内容作为载体 - 用了
font-smoothing: antialiased或-webkit-font-smoothing在某些 macOS Safari 下削弱阴影表现 - 伪元素
::before/::after里用content插入文字，但忘了给该伪元素单独设text-shadow
兼容性与性能注意点
IE10+、Edge、Chrome、Firefox、Safari 全都支持 text-shadow，但 IE9 及更早版本完全不识别。性能方面基本无压力，除非你叠了十几层高斯模糊阴影（比如 text-shadow: 0 0 10px #000, 0 0 20px #000, ...），这时可能触发重绘开销。
立即学习“前端免费学习笔记（深入）”；
- 移动端 iOS Safari 对超大
blur-radius（比如 >30px）渲染不稳定，建议控制在12px内 - 如果要实现“描边”效果，别只靠一层阴影；用多层不同方向的
text-shadow模拟（例如上下左右各 1px 偏移），比依赖-webkit-text-stroke兼容性更好 - 不要在
body或全局*上滥用text-shadow，小字号文本加阴影反而降低可读性
真正麻烦的是阴影和字体抗锯齿、系统深色模式、CSS 自定义属性联动时的表现差异——这些没法靠一行代码解决，得实机多测。
