box-shadow 的扩张感源于 blur-radius 与 offset-y 协同变化：blur-radius 控制扩散，offset-y 模拟浮起高度，alpha 增强纵深；transition 必须写在常态样式中，且层数一致、数值用整数，父容器 overflow: hidden 需预留空间或改用 drop-shadow。
box-shadow 的扩张感其实来自 blur-radius 和 offset-y 协同变化
所谓“阴影扩张”，不是阴影物理变大，而是人眼感知到的覆盖范围变广、边缘更松散。关键参数只有三个：offset-y（第二值）、blur-radius（第三值）和 color 的 alpha。只改其中一个，效果会失真：
-
blur-radius从8px→24px：这是“扩散”的主因，但单独加大容易发虚 -
offset-y从4px→12px：模拟卡片浮起后与底面距离增大，阴影自然下移拉长 -
alpha从0.1→0.2：增强纵深对比，避免模糊后变“灰雾” - 水平偏移
offset-x必须保持0，否则阴影歪斜，破坏居中感
transition 写错位置会导致 hover 时“啪一下”闪现
很多人把 transition 写在 .card:hover 里，结果鼠标移入有动画，移出却直接跳变——因为基础状态没声明过渡行为。浏览器默认“立刻还原”。
-
transition必须写在常态样式中：.card { transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } - 绝对不要写
transition: all 0.25s：会意外触发 background-color、border 等重绘，干扰焦点 - 缓动函数选
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更自然，前段慢启动，后段加速扩散 - 时间控制在
0.2s–0.3s：短于0.15s太急，长于0.35s显迟滞
父容器 overflow: hidden 是最常被忽略的裁剪陷阱
卡片加了阴影，hover 后却“没变化”？大概率是它套在一个 overflow: hidden 的容器里，扩大的阴影直接被裁掉了。这不是 bug，是盒模型的刚性限制。
- 检查 computed 样式里的
box-shadow是否真实生效，别只看 styles 面板 - 解决方案一：给父容器加
padding，预留阴影空间（比如padding: 12px） - 解决方案二：改用
transform: translateY(-2px)辅助视觉浮起，不依赖阴影外扩 - 解决方案三：换
filter: drop-shadow()，它绕过盒模型限制，在 Safari 和高 DPI 屏上更稳
多层阴影叠加时，层数不一致会让 transition 失效
基础态写一层阴影，hover 态写两层，浏览器不会“替换”，而是叠加。两组阴影层数不同（1 层 vs 2 层），大多数浏览器直接跳变，不渐变。
- 正确做法：始终维持相同层数。例如基础态写两层，第二层设为不可见：
box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 0 0 rgba(0,0,0,0); - hover 态激活第二层：
box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 12px 24px rgba(0,0,0,0.15); - 所有数值用整数：避开
0.5px或1.2px，Safari 对亚像素spread渲染极不稳定 - 深色背景上别硬套
rgba(0,0,0,0.2)，换rgba(255,255,255,0.06)才能看清
box-shadow —— 浏览器无法对 “无” 到 “有” 做插值，过渡就根本不会启动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
