单层box-shadow不够用，因其只能模拟单一方向光投射，无法同时控制不同方向的模糊、颜色、层级；真实卡片阴影需底部主影、侧边斜影、顶部反衬，须用::before和::after伪元素分层实现。
为什么单层 box-shadow 不够用
单层 box-shadow 只能模拟单一方向的光投射，而真实悬浮卡片的阴影往往有：底部主阴影（深、扩散）、侧边微弱斜影（偏移+模糊）、甚至顶部环境光反衬（浅灰、高模糊）。纯 box-shadow 无法同时控制不同方向的模糊半径、颜色透明度和层级顺序——它始终是“一层贴图”，无法被其他元素遮挡或叠加。
用 ::before 和 ::after 模拟多层物理阴影
核心思路是把每层阴影拆成独立伪元素，绝对定位在卡片下方，再通过 z-index 控制叠放顺序。注意：伪元素默认不占文档流，且必须设 content: "" 才能渲染。
常见组合建议：
-
::before：最底层，大扩散、深色、无偏移 → 模拟环境漫反射阴影 - 卡片本体：保留轻微
box-shadow或纯色边框 → 强化轮廓感 -
::after：上层，小偏移（如2px 2px）、中等模糊、稍亮 → 模拟主光源斜射投影
示例关键 CSS：
.card {
position: relative;
background: white;
border-radius: 8px;
}
.card::before,
.card::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
}
.card::before {
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
filter: blur(4px);
}
.card::after {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transform: translate(2px, 2px);
}
悬停时动态增强阴影层次的技巧
仅靠静态多层不够，真实交互中阴影应随“抬升感”变化。关键是让各层阴影的参数响应 :hover，但要注意同步性与性能：
- 避免对
::before和::after同时做transform: scale()—— 会放大整个伪元素，导致边缘锯齿 - 优先调整
box-shadow的offset和blur值，更轻量 - 给
::after加transition: box-shadow 0.2s ease，比过渡transform更稳定 - 若需“抬起”效果，可对卡片本体加
transform: translateY(-2px)，同时让::after的transform偏移减小（如从translate(2px, 2px)改为translate(1px, 1px)）
容易被忽略的兼容性与渲染陷阱
多伪元素阴影在部分场景下会意外失效：
- 父容器设了
overflow: hidden→ 阴影被裁切，需确保卡片父级留出足够padding或改用overflow: visible - 伪元素未设
position: absolute+top/left→ 默认渲染在文档流末尾，位置不可控 - Chrome 旧版（filter: blur() 在伪元素上支持不稳定，建议用
box-shadow的blur替代 -
z-index: -1在某些 flex/grid 容器中可能被重置，必要时给卡片父级加position: relative
真正难的是让三层阴影在不同设备缩放、DPR 下保持一致观感——这没有银弹，只能靠真机反复调 px 值和 rgba 透明度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
