::after阴影不平滑的根本原因是未正确启用过渡动画。需确保伪元素始终渲染（设content、尺寸、定位及初始box-shadow），transition必须写在::after上，且hover前后box-shadow参数结构一致，推荐用filter: drop-shadow替代以提升性能。
hover 时 ::after 元素的阴影不平滑，本质是 box-shadow 属性在伪元素上未启用过渡动画。直接对 ::after 设置 transition: box-shadow 通常无效，因为 ::after 默认没有尺寸和渲染（display: none 或未设置 content、宽高、定位等），导致浏览器无法计算过渡起始/结束状态。
确保 ::after 元素始终存在并可过渡
过渡生效的前提是：元素在 hover 前后都处于“已渲染”状态，且 box-shadow 值有明确变化（不能从 none 到有值，或从 0 到非零但未声明初始值）。
- 给
::after设置明确的content: ""、尺寸（width/height）、定位（如position: absolute）和初始box-shadow: 0 0 0 transparent - 避免用
display: none/block控制显示隐藏——这会中断过渡；改用opacity: 0/1或visibility: hidden/visible+transform等可过渡属性 - 示例写法：
.btn { position: relative; } .btn::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: box-shadow 0.3s ease; } .btn:hover::after { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
transition 必须写在 ::after 上，而非父元素
很多人把 transition 写在父选择器（如 .btn）里，但 box-shadow 是作用于 ::after 的，过渡声明必须也放在 ::after 规则中，否则无效。
- ✅ 正确：
.btn::after { transition: box-shadow 0.3s ease; } - ❌ 错误：
.btn { transition: box-shadow 0.3s ease; }（父元素没设 box-shadow，且不控制伪元素）
避免阴影突变：统一 shadow 参数结构
如果 hover 前后的 box-shadow 参数数量或单位不一致（比如一个用 0 0 0 #000，另一个用 0 4px 8px 2px rgba(0,0,0,0.2)），浏览器可能无法插值，造成跳变。
立即学习“前端免费学习笔记（深入）”；
- 保持两个状态的 shadow 都包含相同数量的长度值（偏移、模糊、扩散）和颜色
- 推荐写全：例如
box-shadow: 0 0 0 0 rgba(0,0,0,0);→box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); - 避免混用
inset和非inset，它们属于不同类型，不可过渡
进阶：用 transform + filter 替代复杂阴影（更流畅）
若仍卡顿，尤其在低端设备上，可考虑用 filter: drop-shadow() 替代 box-shadow，它支持硬件加速，且对伪元素更友好；或结合 transform: scale() 模拟“浮起+阴影增强”效果，视觉更自然。
.btn::after { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: filter 0.3s ease; }.btn:hover::after { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }- 注意：
drop-shadow基于元素形状裁剪，适合不规则轮廓；box-shadow基于盒模型矩形，两者行为略有不同
