::before双层阴影立体效果原理是用伪元素复制文字并错位、模糊、变暗模拟投影，需content、absolute定位和relative父容器三要素；z-index:-1压底、pointer-events:none防交互干扰，深色模式需适配颜色与降级方案。
什么是::before双层阴影的立体效果原理
纯CSS实现文字立体感，核心不是叠加多层text-shadow，而是用::before伪元素复制文字内容，再错位+模糊+变色，模拟前层文字被“顶起”后的投影。它比单text-shadow更可控，能做出真实厚度感，但前提是必须设置position: relative在父元素上，否则::before会脱离文档流乱飘。
基础写法：必须声明的三个关键样式
漏掉任意一项都会导致伪元素不显示或错位：
-
content: attr(data-text)——从data-text属性读取文字，避免在::before里硬编码；HTML需写成<h1 data-text="Hello">Hello</h1> -
position: absolute+top: 2px; left: 2px——偏移量决定“厚度”，通常1–3px最自然；过大显得浮夸，过小看不出层次 -
color: #666（或带透明度的暗色）+filter: blur(0.5px)——投影不能太锐利，blur比text-shadow的模糊更柔和，且兼容性更好（Chrome/Firefox/Edge均支持）
z-index和pointer-events容易被忽略的坑
伪元素默认绘制在原文字上方，必须用z-index: -1把它压到下面，否则看到的是灰色模糊块盖住正文。但压下去后，如果父容器有pointer-events: none或子元素触发点击区域判断，可能误判交互位置。更稳妥的做法是：
- 给原文字加
position: relative; z-index: 2 - 给
::before设z-index: 1，而非-1 - 确保
::before不响应事件：pointer-events: none
适配深色模式与高对比度的注意事项
硬写color: #666在深色背景下会看不见。推荐用color: color-mix(in srgb, currentColor 30%, transparent)（支持Chrome 111+），或回退方案：
立即学习“前端免费学习笔记（深入）”；
color: rgba(0, 0, 0, 0.3);
@media (prefers-color-scheme: dark) {
color: rgba(255, 255, 255, 0.2);
}
另外，filter: blur()在部分旧版Safari中表现异常，若需兼容iOS 15以下，改用text-shadow: 2px 2px 1px rgba(0,0,0,0.2)作为降级，但立体感会弱一档。
