box-shadow不发虚、不溢出的关键是控制模糊半径（8px～16px）、慎用负扩张值，避免父容器overflow:hidden未预留空间；推荐写法：box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)，并配合transition: box-shadow 0.2s ease-in-out及父容器padding或transform优化。
box-shadow 基础参数怎么配才不发虚、不溢出
阴影发虚或卡片边缘被裁掉，通常是因为 box-shadow 的第四个参数（扩张半径）为负数，或容器设置了 overflow: hidden 却没预留足够空间。标准悬浮阴影推荐用正向扩张（可选）、适度模糊（8px～16px），并确保父容器有足够内边距或自身不裁剪。
-
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)—— 轻量级悬浮，-2px 抑制边缘光晕扩散 - 避免写成
box-shadow: 0 0 0 4px #000这类纯扩张阴影，hover 时会突兀“胀开” - 若卡片套在
overflow: hidden的容器里，要么给容器加padding，要么改用transform: translateY(-2px)辅助提升视觉悬浮感
hover 伪类触发时为什么阴影没变化
常见原因是 CSS 选择器权重不足，或 hover 目标不是直接作用于卡片元素本身。比如卡片内部有 <div class="card">，但写了 .card-container:hover .card 却忘了 .card-container 并未设宽高或触发条件（如未设 display: block）。
- 确保 hover 绑定在卡片最外层元素上：
.card:hover { box-shadow: ... } - 不要嵌套过深，例如
.wrapper .inner .card:hover容易被其他规则覆盖，优先用单一 class 控制 - 检查是否误用了
:active或:focus替代:hover，尤其在触摸设备上 hover 行为可能延迟或不触发
如何让阴影过渡更自然而不是“啪一下”出现
没有 transition，box-shadow 默认是即时切换，肉眼明显卡顿。必须显式声明过渡属性，且只过渡阴影相关值，避免连带 width 或 height 一起动导致布局抖动。
- 正确写法：
transition: box-shadow 0.2s ease-in-out（推荐ease-in-out，比linear更符合物理感） - 别写成
transition: all 0.2s—— 会意外触发字体、背景色等无关属性动画，增加重绘开销 - 移动端要注意：部分老安卓 WebView 对
box-shadow过渡支持差，可加will-change: box-shadow提前提示渲染引擎（但别滥用）
多层阴影叠加时 z-index 和渲染顺序怎么控制
box-shadow 本身不占文档流、也不受 z-index 影响，但多个阴影写法顺序很重要：CSS 里靠后的阴影会叠在前面阴影之上。如果想模拟“内凹+外浮”效果，得靠多组 box-shadow 值拼接，而非依赖层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 双阴影示例：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15)—— 浅近+深远，形成层次 - 别试图用
z-index调整阴影层级，它对box-shadow无效；真正要控层叠，得靠卡片自身z-index和父容器position配合 - 注意 Safari 对多阴影性能较敏感，超过 3 组可能造成滚动卡顿，建议压测真机
:focus-within）或屏幕阅读器下是否可达。如果只依赖 :hover，残障用户或键盘导航用户就看不到阴影反馈——需要补一层 .card:focus-within 或用 JavaScript 模拟焦点态。 
