text-shadow多层错位必须严格按“水平偏移 垂直偏移 模糊半径 颜色”顺序书写，缺省或错序将导致整条声明静默失效；三层不同方向微偏+透明度递减可实现精准错落效果。
text-shadow 多层错位必须严格按顺序写参数
浏览器对 text-shadow 的解析是“全有或全无”：只要顺序错、缺参数，整条声明就静默失效——不报错，也不渲染。常见错误如 text-shadow: #000 2px 2px（颜色提前）、text-shadow: 2px 2px 0（缺颜色）、text-shadow: 2px #000 2px（颜色插中间），都会被直接忽略。
正确写法必须是：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色，前两项必填，后两项可省略（模糊默认为 0，颜色默认为 currentcolor，但前提是文字本身有显式颜色）。
- 正向偏移（如
2px 2px）让阴影落在右下方，适合常规投影 - 负值可用（如
-1px -1px）把阴影拉到左上方，常用于高光层或内凹效果 - 模糊半径设为
0时，Safari（尤其 iOS 14 前）可能跳过该层；稳妥起见统一写成0.1px
三层错位比两层更可控，且必须方向不同
只用两层 text-shadow 往同一方向偏移（比如都 1px 1px），结果只是阴影变厚、边缘发虚，并非“高低错落”。真要制造视觉分离感，得让各层朝不同方向微偏，并控制透明度递减。
典型结构推荐三色分层：
立即学习“前端免费学习笔记（深入）”；
-
rgba(255, 0, 0, 0.65)往左上偏（如-0.8px -0.8px） -
rgba(0, 255, 0, 0.6)居中微调（如0 0或0.1px 0.1px） -
rgba(0, 0, 255, 0.55)往右下偏（如0.9px 0.9px）
红绿蓝错开，才能还原信号干扰的“撕裂”本质；每层透明度递减，防止叠加过曝、层次丢失。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
主文字层必须加极细描边，否则边缘露底
错位后文字边缘容易“透出背景”，尤其在浅色背景上，看起来像文字消失了一样。这不是 bug，是 text-shadow 层之间没覆盖住原始字形边缘造成的空隙。
解决办法是给主文字加一层不可见但关键的描边：
-
text-shadow: 0 0 1px #000（或0 0 0.1px currentcolor） - 这层描边不偏移、不透明、极细，只为填补缝隙
- 它必须写在所有错位 shadow 的最前面，否则会被盖住
伪元素方案在 flex/grid 容器里极易错位失败
想用 ::before 和 ::after 分别控制上下两层？问题在于它们默认继承父级 font-size 和 line-height，一旦父容器用了 display: flex、transform 或 vertical-align，各层基线就无法对齐，错位变成“错乱”。
更可靠的做法是放弃伪元素，直接用 text-shadow 多层控制——它不依赖布局上下文，所有偏移都是相对于文字自身坐标系，兼容性也更好（包括 Safari 和旧版 Chrome）。
真正难的不是写几行 CSS，而是控制每层偏移的像素级精度和透明度衰减节奏；稍一松动，错位就滑向模糊或重叠，而不是“高低错落”。
