text-shadow语法为h-offset v-offset blur-radius color，顺序不可错；支持多层叠加、rgba透明度及兼容性处理，但IE9以下不支持。
text-shadow 基本语法和参数顺序不能错
text-shadow 的值顺序是固定的：text-shadow: h-offset v-offset blur-radius color;。漏掉任意一项都可能让效果失效，比如只写两个数值（text-shadow: 2px 2px #000;）会默认 blur-radius 为 0，看起来是硬边阴影；但若把颜色写在前面（text-shadow: #000 2px 2px;），浏览器直接忽略整条声明。
常见错误现象：文字没阴影、阴影位置反向、颜色不生效——八成是参数顺序或单位混用（比如 px 和 em 混搭导致计算异常）。
- 水平偏移（
h-offset）为负值时，阴影向左；正值向右 - 垂直偏移（
v-offset）为负值时，阴影向上；正值向下 -
blur-radius必须是非负数，不支持百分比或em - 颜色支持所有 CSS 颜色格式：
#333、rgba(0,0,0,0.5)、hsl(0,0%,20%)
多层阴影叠加实现立体/发光效果
单个 text-shadow 只能定义一层阴影，但可以用逗号分隔多个值，实现多层叠加。这是做出「浮雕」「内凹」「霓虹光晕」的关键。
例如模拟按钮按下效果：text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #999;；或者柔和发光：text-shadow: 0 0 5px #ff6b6b, 0 0 10px #ff6b6b;。
- 每层阴影独立计算，顺序靠前的在下层，靠后的在上层（类似图层堆叠）
- 重复使用相同模糊半径 + 不同偏移，可模拟「投影深度」
- 用
rgba()控制透明度，避免多层叠加后颜色过重 - 超过 3–4 层阴影可能影响渲染性能，尤其在低配设备上滚动时出现卡顿
兼容性和 fallback 要主动处理
text-shadow 在 IE10+、Edge、Chrome、Firefox、Safari 中支持良好，但 IE9 及更早版本完全不支持。它不会触发回退机制，也不会报错，只是静默失效。
如果你依赖阴影传递关键信息（比如区分禁用状态的文字），必须提供视觉 fallback：
- 用
color或opacity明确标示状态，别只靠阴影判断是否启用 - 对老版本 IE，可通过条件注释或 JS 检测，加一层
border-bottom或背景色微调 - 不要在
@media print中依赖text-shadow，打印样式里它默认被忽略 - 高对比度模式（Windows HC / macOS Dark Contrast）下，部分阴影可能被系统强制禁用
text-shadow 和 filter: drop-shadow() 的核心区别
text-shadow 只作用于文字内容本身；而 filter: drop-shadow() 是作用于整个元素的渲染层，会对所有内容（包括伪元素、子元素轮廓）投下阴影。
典型误用场景：给带 ::before 图标的按钮加阴影时，用 filter 会导致图标和文字阴影融合成一团；而用 text-shadow 则只影响文字，图标需单独处理。
-
text-shadow支持多层、精确控制每层偏移与模糊，filter: drop-shadow()只能设一组参数 -
filter不支持rgba()的 alpha 通道做阴影透明度控制（它用的是整个元素的 opacity） - 动画
text-shadow性能优于filter，后者触发布局重排风险更高 - 某些字体 hinting 设置下，
text-shadow在小字号（filter 相对平滑但模糊更重
实际应用中最容易被忽略的是：阴影的 blur-radius 和字号的比例关系。14px 文字配 4px 模糊看着刚好，换成 28px 字就显得发虚——得同步放大模糊值，否则层次感就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
