text-shadow 是唯一能直接给文字加阴影的 css 属性，box-shadow 对文字无效；其参数必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序书写，缺一不可；三层叠加（高光、主影、深影）可实现可信立体感，配色需适配背景明暗，细字体慎用过厚阴影，伪元素仅作斜向等特殊需求的最后手段。
text-shadow 是唯一能直接给文字加阴影的 CSS 属性，box-shadow 对文字无效——它只套容器框，文字本身不会被渲染出阴影。
text-shadow 参数顺序写错就完全失效
必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序写，缺一不可。前两个值（偏移）哪怕为 0 也得显式写出；后两者可省略，但位置不能调换。
-
text-shadow: #000 2px 2px;→ 颜色放最前，整条声明被忽略 -
text-shadow: 2px 2px 0;→ 没颜色，浏览器当无效值处理 -
text-shadow: 2px 2px rgba(0,0,0,0.5) 4px;→4px插在颜色后，语法错误 - 正确写法：
text-shadow: 0 -1px 1px rgba(255,255,255,0.7), 1px 1px 2px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.2);
三层叠加才出可信立体感，不是越多越好
单层 text-shadow 只能做平面投影或发光；真立体需至少 3 层，且每层 offset、blur、color 要模拟统一光源方向与景深衰减。
- 高光层：
0 -1px 1px rgba(255,255,255,0.7)（顶部浅色，小模糊） - 主影层：
1px 1px 2px rgba(0,0,0,0.3)（中灰，适中模糊） - 深影层：
2px 2px 4px rgba(0,0,0,0.2)（深灰，略大模糊） - 别全用相同 alpha 值——建议按
0.7 → 0.3 → 0.2递减，否则像贴纸 - iOS Safari 在超过 4 层时易掉帧，尤其滚动中，砍到 3 层最稳
深色/浅色背景配色逻辑完全不同
阴影不是越黑越“重”，而是要让文字从背景里“浮出来”。纯黑 #000 在深底上几乎隐形，纯白 #fff 在浅底上等于没写。
- 深背景（如
#1a1a1a）：用浅色高光 + 中灰主影，例text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅背景（如
#f8f9fa）：用深灰主影 + 略深底影，例text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); - 细字体（
font-weight: 300）加厚阴影易糊成一团；超粗字体（700+）需加大 offset，否则阴影紧贴字形 -
line-height小于1.4时，多行标题的阴影容易和下一行文字打架
伪元素模拟阴影是最后手段，别滥用
当需要倾斜、拉伸或非标准角度阴影时，::before 伪元素可绕过 text-shadow 的方向限制，但它会额外创建渲染层，增加主线程压力。
- 优先用原生
text-shadow解决；只有真需要斜向投影或动态变形时才考虑伪元素 - 伪元素方案必须配合
pointer-events: none，否则可能拦截点击 - 动画中频繁修改
text-shadow值比改伪元素 transform 更耗性能 - 调完记得关灯看一眼屏幕——所有阴影偏移方向是否一致朝右下？这是判断光路逻辑是否成立的最快方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
