box-shadow扩散半径（spread）应设为0或小正整数（如1–2px），真正影响扩散感的是blur而非spread；超过4px易使阴影变硬失真，推荐默认用spread: 0、悬停时微调至1–2px，并配合blur和v-offset协同控制层次。
box-shadow扩散半径（spread）设多少才不发虚
spread值为负数时容易裁切阴影边缘，正值又易让卡片“膨胀”失真；多数场景下它该是0或小正整数。真正影响扩散感的是blur，不是spread。实测发现：spread: 1px在Retina屏上几乎不可见，spread: 2px开始有轻微外扩，但超过4px后阴影轮廓会变硬、失去悬浮的柔和感。
推荐做法：
- 默认状态用
spread: 0，靠blur和v-offset控制层次 - 悬停态可微调
spread: 1px或2px，仅用于强化底部投影的“接地感”，别指望它模拟扩散 - 想模拟真实阴影扩散，优先增大
blur（如从6px→24px），同时小幅收v-offset（如4px→2px） - 避免
spread与blur同比例放大——比如blur: 12px; spread: 6px会让阴影像被拉长的墨迹，不是浮起
多层box-shadow叠加时，各层的spread怎么分配
两层阴影是最实用的组合，但很多人把两层都设相同spread，结果视觉上仍是“一层厚影”。关键在于分层职责：第一层模拟近处接触投影，第二层模拟远处环境弥散。它们的spread必须错开。
典型配置：
- 底层（近投）：
0 2px 6px 0 rgba(0,0,0,0.08)→spread: 0，强调紧贴感 - 上层（远弥）：
0 8px 24px 2px rgba(0,0,0,0.04)→spread: 2px，配合更大blur营造空气感 - 若加第三层（仅限大屏），
spread可到4px，但alpha必须≤0.02，否则在浅色背景上显脏 - 所有
spread值统一用整数，避开0.5px或1.2px——Safari对亚像素spread渲染极不稳定
filter: drop-shadow()能替代box-shadow实现更稳的扩散吗
能，但有明确边界：drop-shadow()不支持spread参数，也不支持内阴影，但它绕过盒模型限制，在高DPI屏和Safari中对模糊半径的渲染更一致。当你发现box-shadow: 0 0 12px rgba(0,0,0,0.1)在iPhone上忽明忽暗，就是drop-shadow()该出场的时候。
迁移要点：
- 语法差异：不是
box-shadow: ...，而是filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08)) - 必须搭配
transform: translateZ(0)或will-change: filter，否则旧版Chrome可能不触发硬件加速 - 不能和
box-shadow混用——浏览器会按顺序叠加，但drop-shadow作用于整个元素（含圆角裁切），可能暴露预期外的边缘光晕 - 移动端兼容性优于
box-shadow，iOS 15+、Android Chrome 90+均稳定支持
为什么hover时加大spread反而让卡片看起来“沉下去”了
因为spread扩大阴影的同时也抬高了阴影重心——尤其当v-offset没同步调整时，阴影底部被撑开，视觉上像卡片被往下“吸”。这不是错觉，是人眼对明暗对比区域的自然误判。
排查清单：
- 检查是否只改了
spread，却忘了调v-offset：悬停时v-offset应略减（如4px→2px），让阴影更“聚”在卡片下方 - 确认
background-color没意外透出：如果卡片border-radius较大而overflow: hidden缺失，spread扩大会暴露底色，形成“灰边”假象 - 禁用
transition: all：它会把spread变化和background-color等重绘属性绑在一起，造成卡顿和视觉拖影 - 真要强扩散感，放弃
spread，改用::after伪元素+scale()+blur()过渡——这是目前最可控的物理模拟方案
spread是最容易被高估的参数。它不负责“浮”，只负责“延展”。真正决定悬浮质感的，是blur与v-offset的协同节奏，以及你有没有在默认状态就写好初始box-shadow——漏掉这句，再精细的spread配置也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
