text-shadow 是唯一能直接给文字加阴影的 css 属性，必须按「水平偏移、垂直偏移、模糊半径、颜色」顺序书写，缺一不可；常见失效原因包括 overflow: hidden 裁剪、文字透明、字体抗锯齿削弱及伪元素未单独设置等。
text-shadow 是唯一能直接给文字加阴影的 CSS 属性，box-shadow 对文字无效——它只套容器框，文字本身不会被渲染出阴影。
text-shadow 参数顺序写错就完全不生效
浏览器不会报错，但整条声明会被忽略。必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序书写，前两个偏移值哪怕为 0 也得显式写出。
-
text-shadow: 2px 2px #000;✅（省略blur-radius，默认为 0） -
text-shadow: 0 0 4px rgba(0,0,0,0.4);✅（完整四参数） -
text-shadow: #000 2px 2px;❌（颜色提前，整条失效） -
text-shadow: 2px 2px 0;❌（没颜色，等价于未定义） -
text-shadow: 2px 2px rgba(0,0,0,0.5) 4px;❌（4px插在颜色后，语法错误）
写了却看不见？先查这四个地方
90% 的“没效果”不是语法问题，而是被意外拦截：
- 父容器设了
overflow: hidden，而阴影（尤其大blur-radius或负偏移）超出边界被裁掉 - 文字颜色是
color: transparent或rgba(0,0,0,0)——text-shadow依赖文字内容作为载体，没颜色就没阴影 - 用了
-webkit-font-smoothing: antialiased，在 macOS Safari 下会显著削弱阴影对比度 - 伪元素（如
::before）里用content插入文字，但忘了给该伪元素单独加text-shadow
小字号和中文加阴影容易糊，参数要收着写
中文字体笔画密、结构重，盲目套用英文参数易发虚：
- 12px 及以下字体，
blur-radius超过2px就可能糊成一团；建议控制在1px内 - 标题（≥32px）可用到
6px，但 iOS Safari 对 >12px渲染不稳定，慎用 - 深色背景配浅色阴影：
text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅色背景配深色阴影：
text-shadow: 0 0 4px rgba(0,0,0,0.4); - 别用纯黑
#000在深底上，也别用纯白#fff在白底上——它们没有 alpha 通道，无法渐变衰减
真正麻烦的是同一组 text-shadow 值，在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍，还得实机多测；更别说深色模式切换时颜色自动适配带来的意外表现。这些没法靠一行代码解决，得动手调、反复看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
