伪元素叠加box-shadow更可控，因每层为独立图层，可自由设置transform、filter、opacity，并规避overflow:hidden裁剪；而直接多层box-shadow绑定同一渲染层，无法单独控制位移或混合模式。
伪元素叠加box-shadow为什么比直接写多层更可控
直接用 box-shadow: 0 2px 4px #000, 0 4px 8px #000 能实现基础多层，但所有阴影都绑定在同一个渲染层上，无法单独位移、缩放或设置不同混合模式。而用 ::before 或 ::after 创建独立图层后，每层可自由控制 transform、filter、opacity，还能规避 overflow: hidden 对内阴影的裁剪问题。
常见错误是忘了给父容器设 position: relative，导致伪元素脱离文档流后定位失效；或者漏写 content: ""，伪元素根本不会渲染。
- 必须显式声明
content: ""，否则伪元素不生成 - 父元素需有
position: relative（或absolute/fixed）才能让absolute定位生效 - 若要投影沉在内容下方，
z-index必须设为负值（如-1），不能只靠 DOM 顺序 - 避免同时对同一元素用
box-shadow和filter: drop-shadow()，Safari 易闪烁
怎么让伪元素阴影看起来“浮起来”而不是贴在表面
真实光照下，物体离背景越远，投影越偏移、越模糊、越淡。纯靠 box-shadow 的 v-offset 模拟不够自然——它只是平移，没有纵深感。正确做法是把伪元素单独下移，并配以更大模糊和更低透明度。
示例中，主卡片上移 transform: translateY(-2px)，伪元素下移 transform: translateY(4px)，再加 box-shadow: 0 6px 12px rgba(0,0,0,0.15)，视觉上就形成了“悬空”错觉。
- 主元素建议用轻微
translateY(-1px ~ -3px)制造上浮感 - 伪元素用
translateY(3px ~ 6px)+ 更大blur（如12px起步）模拟距离衰减 - 透明度别超过
0.2，否则像盖了层灰布；多层时建议逐层降低 alpha（如0.15、0.1、0.06） - 慎用
spread，它会让阴影边缘变硬，破坏“光散射”感
overflow: hidden 导致伪元素阴影被裁掉怎么办
这是最常踩的坑：容器设了 overflow: hidden（比如圆角卡片、轮播图容器），伪元素哪怕 inset: 0 且 z-index: -1，也会被裁掉。不是 bug，是规范行为——overflow 管的是整个盒模型，包括伪元素生成的内容。
解决方式不是删 overflow，而是绕过它的裁剪逻辑：
- 给父级加
clip-path: none（注意：不是子元素加） - 改用
overflow: visible，但需确认不会引发其他布局问题（如绝对定位子元素溢出） - 终极方案：把伪元素移到父级外层包裹容器里，用兄弟选择器或额外 DOM 节点承载阴影
- 如果必须保留
overflow: hidden且不能改结构，只能退回到纯box-shadow多层，放弃伪元素的位移控制
多层伪元素阴影的性能红线在哪
每多一个伪元素，浏览器就要多建一个合成层。高模糊值（blur > 25px）、动画过渡、多层叠加这三者叠在一起，移动端极易掉帧。Chrome DevTools 的 “Rendering” 面板打开 “Paint flashing”，滑动时看到大片红色，就是重绘压力过大。
实际项目中，两层伪元素（::before + ::after）已足够表达深度；第三层开始要权衡视觉收益与性能损耗。
- 单个伪元素的
filter: blur()比多层box-shadow更耗性能，优先用后者 - 动画只驱动
transform和opacity，别动box-shadow值本身 - 模糊半径超过
30px时，iOS Safari 可能出现渲染断裂，建议上限设为24px - 深色模式切换时，避免在媒体查询里重定义整套伪元素结构，改用 CSS 变量控制颜色和透明度更轻量
box-shadow 单层能力的硬限制：无法独立位移、无法响应 overflow 裁剪、无法分层控制混合效果。真正难的不是写出来，是在视觉真实感和运行时开销之间找到那个刚好够用的平衡点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
