box-shadow 多层声明顺序决定视觉叠放关系：前面的阴影在上层，后面的在下层；应按近层（小偏移低模糊）、中层、远层（大偏移高模糊）顺序书写，并可加入柔和 inset 阴影模拟纸张侧面厚度。
box-shadow 多层声明顺序决定视觉叠放关系
浏览器按 box-shadow 值中从左到右的顺序绘制阴影：**写在前面的阴影在上层，写在后面的在下层**。这和图层叠加逻辑相反，但恰恰是模拟纸张堆叠的关键——最上层的“纸”投下的阴影应最锐利、偏移最小，而底层“纸”投下的阴影要更扩散、更柔和。
常见错误是把大模糊值的外阴影写在最后，结果它盖住所有细节，看起来像蒙了一层灰。正确做法是：先写小偏移+低模糊的「近层投影」，再写大偏移+高模糊的「远层投影」。
-
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.03);—— 典型三层纸张投影：近、中、远 - 避免
rgba(0,0,0,0.2)这类高透明度大模糊值放在末尾，它会压暗前两层的层次感 - 若需强调某一层“纸”的抬升感，可给该层加轻微正
spread（如+1px），让阴影略向外撑开
用 inset + 外阴影组合强化纸张边缘厚度
纯外阴影只能表现“浮起”，无法体现纸张侧面的厚度。加入 inset 阴影能模拟被上层纸遮挡后露出的微弱内侧暗边，这是纸张叠放感的核心细节。
注意 inset 必须写在逗号分隔的阴影列表中，且建议放在最后（因它本就该是“最内层”的效果）。
- 推荐组合：
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.04), inset 0 1px 1px rgba(0,0,0,0.05); -
inset层不宜过强：模糊值控制在1px内，透明度 ≤0.06，否则像脏边 - 不要对同一元素同时用
inset和负spread模拟厚度——后者兼容性差，且易导致边缘像素断裂
不同背景色下 rgba 透明度必须动态调整
纸张阴影不是固定参数能套用的。浅色背景上，rgba(0,0,0,0.1) 可能发灰；深色背景上，同值又可能完全不可见。关键在明度差而非绝对黑度。
真正耐看的“纸感”阴影，往往用带灰阶的暗色，而非纯黑。
- 浅底（如
#ffffff）：用rgba(0,0,0,0.06)～0.09)，搭配blur ≥ 4px - 深底（如
#1e1e1e）：改用rgba(255,255,255,0.04)～0.07)模拟纸张受环境光反射的微亮边缘 - 切勿直接套设计稿给的十六进制带 alpha 值（如
#00000020）——rgba()在各浏览器中解析更一致
性能与可维护性边界：别超过 4 层
每多一层 box-shadow 都增加一次合成计算。实测在中低端移动设备上，超过 4 层会导致滚动卡顿，尤其配合 transform 动画时。
更隐蔽的问题是调试成本：层数一多，改一个值就难定位影响范围。
- 优先用 2–3 层解决：近层（锐利）、中层（主体积）、远层（氛围）
- 如需强化某方向光照（如左上角主光源），可用一组反向偏移阴影替代新增一层，例如加
-2px -2px 4px rgba(0,0,0,0.03) - 所有层的透明度应呈梯度递减（如
0.08 → 0.05 → 0.03），否则视觉上会“粘连”成一块，失去纸张分离感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
