多层box-shadow需按近层（小偏移低模糊）、中层、远层（大偏移高模糊）顺序书写，如0 2px 6px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06)，且远层透明度须≤0.06以防发虚。
box-shadow 多层叠加怎么写才不糊
单层 box-shadow 只能浮起，撑不起“卡片堆叠”的视觉纵深。真正分层靠的是 2–3 层阴影按距离和衰减逻辑组合：近处轻、中距实、远处虚。常见错误是把三层数值全设成 0 4px 12px rgba(0,0,0,0.15)，结果糊成一块灰斑。
推荐写法：box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06)
- 第一层（
0 2px）模拟卡片边缘最贴近视线的微光，模糊小、透明度低 - 第二层（
0 4px）是主投影，承担结构识别功能，blur 和 opacity 略提 - 第三层（
0 8px）负责空间延展感，blur 要大但 alpha 必须压到 0.06 以下，否则在高 DPR 屏上发虚 - 移动端务必控制最大
blur-radius≤ 12px；iPhone 上 >16px 的模糊会触发整层重绘，滚动卡顿明显
z-index 和 transform 怎么配合才真像阶梯
只调 z-index 是平铺遮挡，不是阶梯。真实错位必须靠 transform：上层卡右偏 + 上移，露出下层一角。但这里有个关键陷阱——transform 会创建新层叠上下文，如果父容器已设 z-index，子元素的 z-index 就只在它内部生效，跨卡片层级就乱了。
- 每张卡片必须显式声明
position: relative（不能只靠z-index） - 用
transform: translateY(-6px) translateX(6px)，偏移量统一控制在 4–12px 区间 - 避免写
z-index: 9999；阶梯用 1/2/3/4 足够，后续加弹窗时不会被意外盖住 - 响应式断点要重置：小屏下单列堆叠，
transform应归零，z-index改为等值或反向（比如桌面端nth-child(2) { z-index: 3 }，手机端改z-index: 1）
为什么卡片阴影在 flex 容器里一半不见了
不是 box-shadow 写错了，是父容器把阴影裁掉了。flex 容器默认不预留“阴影溢出空间”，尤其当子项用 flex: 1 且内容空时，计算高度为 0，阴影直接掉出渲染区域。
立即学习“前端免费学习笔记（深入）”；
- 临时调试：给父容器加
outline: 1px solid red，看实际边界是否包住阴影 - 根治方法：父容器设
overflow: visible（别用hidden或auto），并确保有明确min-height - Grid 布局同理：避免仅用
1fr行高，加minmax(0, 1fr)或显式min-height: 100px - 深色模式下注意：
rgba(0,0,0,0.1)在黑背景上几乎不可见，得用@media (prefers-color-scheme: dark) { box-shadow: 0 4px 12px rgba(255,255,255,0.08); }
伪元素 ::before 模拟投影比纯 box-shadow 更稳吗
是，尤其对需要“投影与卡片分离”或“投影带位移间隙”的场景。::before 可以独立定位、缩放、偏移，不受卡片自身 transform 影响，避免硬件加速层混乱。
- 基础写法：
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); z-index: -1; transform: translateY(4px); } -
transform: translateY(4px)让投影整体下移，形成卡片与影子之间的“空气感”，比单纯加大v-offset更自然 - 安卓 WebView 渲染模糊？加
backface-visibility: hidden到.card上缓解 - 慎用
::after加高光：若卡片有透明背景或圆角，::after边缘可能漏白，优先用渐变背景替代
