box-shadow深度由blur-radius与spread-radius共同决定，需配合vertical-offset和透明度协同调整；内阴影需padding留空间；响应式需多断点缩放参数；多层阴影按书写顺序堆叠。
box-shadow 的四个长度参数怎么配出想要的阴影深度
阴影“深度”不是独立属性，本质是 box-shadow 第三个值（blur-radius）和第四个值（spread-radius）共同作用的结果。只调大 blur-radius 会让阴影变“虚”但不显“沉”；真正增强下沉感的关键是配合正值的 spread-radius。
常见误操作：把 blur-radius 设成 0，以为能做出“硬边阴影”，结果阴影完全不可见——因为默认没有偏移，阴影被元素自身盖住了。
-
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1)—— 基础下沉：4px 垂直偏移 + 8px 模糊，适合卡片类模块 -
box-shadow: 0 6px 12px 2px rgba(0,0,0,0.12)—— 加深感：+2px spread 让阴影整体外扩，视觉更“压”向背景 -
box-shadow: 0 10px 20px 4px rgba(0,0,0,0.15)—— 强深度：适用于模态框或悬浮按钮，注意别在小图标上滥用，会显得笨重
用 inset 实现内阴影时为什么阴影“陷不进去”
内阴影（inset）常被用来模拟凹陷效果，但很多人写完没变化，核心原因是：没有给元素留出“可渲染阴影的空间”。inset 阴影是从元素边界往里画的，如果 padding 为 0、border 为 0，且内容紧贴边缘，阴影就全被内容挡住了。
- 必须保证有
padding（至少 2–4px），否则阴影不可见 - 避免同时设置
overflow: hidden，它会裁掉内阴影区域 - 不要依赖
inset做主视觉深度，它更适合 subtle 边缘强调，比如输入框聚焦态：box-shadow: inset 0 1px 3px rgba(0,0,0,0.1)
响应式模板里阴影随屏幕缩放“失真”怎么办
直接写固定像素值（如 8px）的阴影，在移动端会显得过重。这不是 bug，而是设计适配问题。css 不支持“阴影按比例缩放”，只能手动分断点控制。
立即学习“前端免费学习笔记（深入）”；
/* 在 html5 模板的响应式 CSS 中这样写 */ .module-card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); } @media (max-width: 768px) {
.module-card {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
}
}
@media (min-width: 1200px) {
.module-card {
box-shadow: 0 6px 16px 2px rgba(0,0,0,0.12);
}
}
重点：移动断点里不仅减小 blur-radius，也要同比例缩小 vertical-offset 和 spread-radius，否则阴影会“浮”起来。
多层阴影叠加时 z-index 无效？那是因为没理解渲染顺序
给一个元素加多个 box-shadow（逗号分隔）时，它们按书写顺序从远到近堆叠——第一个最远（像背景），最后一个最近（像贴着元素表面）。这跟 z-index 无关，z-index 控制的是整个元素在层叠上下文中的位置，不干预其内部阴影的绘制顺序。
- 错误写法：
box-shadow: 0 -4px 8px #000, 0 4px 8px #000—— 上阴影会被下阴影遮住（因后者后写，层级更高） - 正确写法：
box-shadow: 0 -4px 8px #000, 0 4px 8px #000可以，但若想让上方阴影“透出”，需降低其 opacity：0 -4px 8px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1) - 慎用三层以上阴影：增加渲染开销，尤其在低端 android webview 中易掉帧
实际调阴影最常卡住的地方，是把“深度”当成单一参数去调，而忽略了 offset、spread、color 透明度三者的耦合关系。改一个值前，先问自己：这里要模拟的是纸张抬升、金属压印，还是玻璃浮层？不同隐喻对应完全不同的参数组合。