text-shadow无法实现真正可控的层叠阴影定位，因其所有阴影共享同一坐标系且无法独立控制z轴、旋转或交互；必须用::before和::after分层偏移，通过绝对定位、独立样式及z-index排序实现立体效果。
纯用 text-shadow 做不出真正可控的层叠阴影定位效果；必须用 ::before 和 ::after 分离图层，各自偏移、模糊、着色，才能实现错落有致的立体文字。
为什么 text-shadow 无法满足层叠定位需求
它本质是一次性叠加渲染：所有阴影共享同一套偏移坐标系，不能单独控制某一层的 z 轴顺序、旋转角度或响应交互。比如想让“下层阴影”往右下偏 2px 并加 blur(1px)，而“上层高光”往左上偏 1px 且不模糊——text-shadow 只能写成逗号分隔的列表，但它们始终共存于同一合成层，无法被其他元素遮挡或独立过渡。
常见错误现象：text-shadow: 1px 1px 0 #000, -1px -1px 0 #fff 看似有上下两层，实际在视觉上会相互干扰、边缘发虚，尤其在深色背景上对比度崩坏。
::before 和 ::after 分层偏移的关键写法
核心是把文字内容“复制”到两个伪元素中，再分别设置 position: absolute + 独立偏移值，而非依赖 text-shadow 的坐标参数。
- 父元素必须设
position: relative，否则伪元素会脱离上下文乱飘 -
::before通常做“投影层”：top: 2px; left: 2px; color: rgba(0,0,0,0.4); filter: blur(0.4px) -
::after通常做“高光层”：top: -1px; left: 0; color: white; opacity: 0.25 - 两层都需
content: attr(data-text)，HTML 写成<h2 data-text="Hello">Hello</h2>，避免硬编码 - 务必设
z-index显式排序：原文字z-index: 2，::beforez-index: 1，::afterz-index: 0（不推荐用负值压底）
容易被忽略的兼容性与交互坑
Chrome/Firefox/Edge 对 filter: blur() 在伪元素上的支持已稳定，但 Safari 旧版（≤16.4）可能失效，此时可降级为 text-shadow 单层 fallback。
更关键的是交互干扰：
- 未设
pointer-events: none时，::after高光层可能拦截鼠标事件，导致点击穿透失败 - 若父容器用了
transform: scale()或will-change，伪元素的绝对定位偏移可能失准，建议统一用transform: translate()替代top/left - 深色模式下，硬写的
#000投影会过重，应改用color-scheme: light dark配合color-mix(in srgb, currentColor 30%, transparent)动态调色
真正难的不是写几行 CSS，而是每层偏移量要和字体大小、行高、设备像素比对齐——1px 在 Retina 屏上可能是 2 物理像素，blur 值超过 0.6px 就开始糊边。这些细节不测真机，只看预览图永远调不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
