不能用 position: relative 模拟多层 text-shadow，因其破坏可访问性、文本选中与渲染性能；text-shadow 本身支持逗号分隔的多层控制，语义清晰、性能更优。
不能用 position: relative 模拟多层 text-shadow —— 它会破坏文本可访问性、选中行为和渲染性能，纯属绕远路。
为什么有人想用 relative + 多个 span 模拟 text-shadow
常见动机是：想控制某一层阴影的 opacity 或 transform，或兼容极老浏览器（如 IE8）；也有人误以为这样能“绕过 text-shadow 的模糊限制”。但实际代价远超收益。
- 每个
<span></span>都是独立 DOM 节点，屏幕阅读器会逐个朗读，语义断裂 - 用户无法跨层选中文本——上层
span会挡住下层，复制粘贴变碎片 - 滚动或动画中，多个绝对/相对定位元素触发频繁重排，比单个
text-shadow高 3–5 倍 GPU 开销 - 响应式缩放时，
px偏移不会随字体缩放，而text-shadow的em/rem单位天然适配
text-shadow 本身就能实现“分层控制”，根本不需要 DOM 模拟
浏览器对逗号分隔的多层 text-shadow 是逐层绘制的，顺序即图层顺序。你可以精确控制每层的偏移、模糊、颜色和透明度，效果更干净、体积更小。
- 发光效果：用同位置、递增模糊、纯色叠加，例如
text-shadow: 0 0 2px #fff, 0 0 6px #aaa, 0 0 10px #333; - 立体浮雕：浅色上阴影 + 深色下阴影，例如
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;（注意模糊为0才锐利） - 动态 fallback：第一层用
#000（IE9 兼容），第二层用rgba(0,0,0,0.3)（现代增强），浏览器自动忽略不支持的值 - 避免写成
text-shadow: 0 0 4px rgba(255,255,255,0.8), 0 0 8px rgba(0,0,0,0.2);—— 半透色叠加易发灰，改用纯色+更低透明度更可控
真要 hack 定位场景？只在两种情况考虑伪元素
如果必须脱离 text-shadow 原生能力（比如需要 inset 阴影、径向模糊或 SVG 级精度），可用伪元素，但仅限以下安全模式：
- 仅用于装饰性标题，且文字内容已通过正常文本节点完整呈现（伪元素
content: ""不含语义文本） - 用
::before绘制阴影层，z-index: -1确保不遮挡真实文本，同时设置pointer-events: none - 必须加
isolation: isolate到父容器，防止 Safari/旧 Chrome 在 transform 容器中裁剪伪元素 - 别用
position: relative+top/left微调——改用transform: translate()，避免触发布局重排
真正难的不是“怎么做出多层效果”，而是判断哪一层该用 text-shadow、哪一层该交给 filter: drop-shadow()、哪一层干脆导出为 SVG。模糊半径超过 12px 还坚持用 CSS 渲染，大概率是在拿用户体验换调试快感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
