box-shadow多层阴影需按从底到顶顺序声明，首层最深、末层最浅；建议3层内，内外阴影偏移反向对齐，真机测试防降级，优先box-shadow保性能，复杂形状可用drop-shadow()。
box-shadow 多层阴影怎么写才不互相覆盖
多层 box-shadow 不是叠加“层数越多越深”，而是按声明顺序从后往前堆叠：第一个阴影在最底层，最后一个在最顶层。浏览器把它们当成一组透明图层依次绘制，所以顺序反了就容易看起来“浮不起来”或者“阴影被吃掉”。
常见错误是复制粘贴时把深色大扩散阴影写在后面，结果它盖住了前面的浅色高光阴影，立体感直接变平。
- 想模拟光源在左上方？先写
box-shadow: 2px -2px 4px rgba(0,0,0,0.1)（浅高光），再写4px 4px 12px rgba(0,0,0,0.15)（主投影） - 避免用太多层：3 层以内足够表达立体；超过 4 层不仅难调，还会轻微影响渲染性能（尤其在滚动容器里）
- 所有阴影必须写在同一行
box-shadow声明中，用逗号分隔；分开写会覆盖前值
为什么 inset 阴影和外阴影混用总显得脏
inset 阴影本质是“向内挖”，和外阴影方向相反，混用时若偏移量、模糊值没对齐，就会出现边缘发虚、内外脱节的观感——不是没效果，是视觉逻辑冲突。
典型场景是按钮按下态：外阴影收缩 + 内阴影模拟凹陷。但很多人直接套用默认值，导致 inset 0 2px 4px rgba(0,0,0,0.2) 和 0 -2px 4px rgba(255,255,255,0.8) 对不上光路。
- 内外阴影的
offset-x/offset-y应反向且数值接近（比如外阴影0 2px，内阴影就用0 -2px） - 内阴影的
blur值建议 ≤ 外阴影的 60%，否则边缘会“膨胀”出边界 - 慎用
inset+spread：spread 在 inset 模式下会让阴影向中心聚拢，极易造成中间过暗、边缘断层
移动端真机上阴影突然变淡或消失
不是 CSS 写错了，大概率是开启了硬件加速强制降级。iOS Safari 和部分安卓 WebView 在检测到 box-shadow 模糊值 > 10px 或层级 > 3 层时，会自动降低渲染精度甚至丢弃部分阴影——尤其在低电量模式下更明显。
这不是 bug，是浏览器主动做的功耗妥协。你看到的“变淡”，其实是 alpha 值被悄悄截断了。
- 上线前务必在真机 Safari/Chrome 中检查
box-shadow: 0 4px 8px rgba(0,0,0,0.12)这类常用值，别只信 DevTools 模拟器 - 避免用
rgba(0,0,0,0.05)这类极低透明度值：Android 旧 WebView 会四舍五入成 0，直接不画 - 如需强一致性，可用伪元素 +
filter: drop-shadow()替代（注意：不支持inset）
box-shadow 和 filter: drop-shadow() 到底该选谁
box-shadow 只作用于元素的盒模型轮廓（矩形框），而 filter: drop-shadow() 是基于元素实际像素 Alpha 通道生成阴影，能跟随圆角、裁剪路径甚至 SVG 形状走。但代价是：它不触发 GPU 加速优化，复杂动画下帧率更容易掉。
简单说：要精确控制形状边缘（比如带 clip-path 的卡片），用 drop-shadow()；要稳定高性能（比如列表项悬停），死守 box-shadow。
-
drop-shadow()参数顺序和box-shadow一致，但不支持inset和spread - 两者不能混用在同一个元素上：
filter会把整个元素（含 box-shadow）当输入再加一层阴影，容易过曝 - 如果用了
transform: scale(0.98)等缩放，box-shadow不缩放，drop-shadow()会跟着缩——这点常被忽略
实际做立体按钮或卡片时，最易被绕进去的是光路一致性：所有阴影的 x/y 偏移方向必须统一指向“假想光源”，哪怕只是心理暗示。调完记得关掉开发者工具的“禁用硬件加速”选项再看一眼——很多“失效”只是调试器干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
