平滑多重阴影不靠堆层数，而靠顺序+blur/spread配比+alpha控制；最左阴影在最上层，须按近距投影（如0 2px 6px 2px rgba(0,0,0,0.15)）到远距漫射（如0 12px 24px 0 rgba(0,0,0,0.08)）书写，inset高光必须置最前，blur宜4–12px、spread±4px内，真机渲染受限需实测验证。

直接说结论：平滑的多重阴影不靠堆层数，而靠**顺序 + blur/spread配比 + alpha控制**。写错顺序或盲目加大blur，真机上反而糊成一片、掉帧、甚至某层直接消失。

box-shadow多层顺序怎么排才不打架

浏览器从左到右绘制逗号分隔的每层阴影：最左边的在最上层，最右边的在最底层——这和图层逻辑相反，但符合真实光照逻辑。

• 要模拟“浮起感”，先写近距投影：0 2px 6px 2px rgba(0,0,0,0.15)（小偏移、中等blur、正spread压边）
• 再写远距漫射：0 12px 24px 0 rgba(0,0,0,0.08)（大偏移、高blur、零spread扩散）
• 如果用inset做高光，必须放在**整个列表最前面**，否则会被后面外阴影盖住
• 反例：box-shadow: 0 12px 24px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.15)——模糊大的先画，直接吃掉细节

blur和spread怎么配才不发虚、不飘边

单调大blur只会让阴影变淡变糊；真正决定“离地高度”和“边缘硬度”的是blur和spread的配合。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• blur建议控制在4px–12px之间；blur: 0在高DPR屏上易锯齿，改用blur: 1px更稳
• spread正值外扩显远（如+2px），负值内收压边（如-2px）；超过±4px容易像素断裂
• 典型组合：0 2px 6px 2px rgba(0,0,0,0.15)（近层，厚实）、0 12px 24px 0 rgba(0,0,0,0.08)（远层，扩散）

移动端真机上阴影突然变淡或消失怎么办

这不是CSS写错了，而是iOS Safari或旧Android WebView主动降级渲染：检测到blur > 10px或层数> 3时，会悄悄截断alpha或丢弃某层。

• 上线前务必在真机Safari/Chrome中测试，别信DevTools模拟器
• 避免用rgba(0,0,0,0.05)这类极低透明度——Android旧WebView会四舍五入为0，直接不画
• 超过3层就谨慎；hover动画中动态增减层数极易触发渲染抖动，应改用预设class切换整套样式
• border-radius值不能是小数（如5.5px），iOS易断裂

真正难的不是写出三行box-shadow，而是让它们在不同DPR、缩放比例、滚动状态和系统功耗模式下始终清晰对齐——参数调得再准，设备一换，就可能糊边或错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！