box-shadow浮起效果需在默认状态显式声明初始值才能触发transition；建议用0.25s ease-out进效+ease-in退效；避免all过渡和小数模糊值，高dpi下优先filter:drop-shadow()。
box-shadow 浮起效果为什么加了 transition 还没反应
常见错误是只写了 box-shadow 的最终状态，但没在默认状态（非 hover）里也声明 box-shadow。CSS transition 只对「有初始值和目标值的同名属性」起作用，如果默认状态压根没写 box-shadow，浏览器就认为是从「无」到「有」，不触发过渡。
实操建议：
- 默认状态必须显式写
box-shadow: 0 2px 6px rgba(0,0,0,0.1);（哪怕值很小） - hover 状态放大偏移和模糊，比如
box-shadow: 0 8px 20px rgba(0,0,0,0.15); - transition 要写在默认状态里，且只针对
box-shadow，避免用all带来意外重绘
transition 时间和缓动函数怎么选才不突兀
浮起效果本质是模拟物理抬升，太快像弹跳，太慢像卡顿。默认 ease 在中间加速过快，容易显得“飘”；ease-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94) 更接近真实惯性。
实操建议：
- 持续时间控制在
0.2s–0.3s之间，0.25s是多数卡片的舒适阈值 - 进效（hover）用
ease-out，退效（离开）用ease-in，更符合视觉预期 - 别把
transition写成transition: all 0.25s ease;——会连background-color或transform一起动，干扰焦点
用 transform translateY 替代 box-shadow 偏移行不行
可以，但目的不同：transform: translateY(-4px) 是真上移元素位置，而 box-shadow 的 y 偏移只是阴影下移，卡片本身不动。两者混用会导致阴影和卡片错位，尤其在父容器有 overflow: hidden 时，transform 上移可能被裁掉。
实操建议：
- 纯阴影浮起：只调
box-shadow的 y 值（如从2px→8px），保持卡片布局位置不变 - 想让卡片真“离地”，再叠加
transform: translateY(-2px)，但务必同步调整box-shadow的 y 偏移，否则阴影悬空 - 注意
transform会创建新层叠上下文，可能影响 z-index 行为，慎用于复杂堆叠场景
阴影在高 DPI 屏幕或 Safari 下发虚怎么办
Safari 对小数值 box-shadow 渲染不稳定，比如 0 0.5px 2px 容易糊；Windows 高 DPI 下，px 单位缩放后也可能失真。这不是 bug，是亚像素渲染的固有表现。
实操建议：
- 统一用整数：避免
0.5px、1.2px，改用1px、2px - 模糊半径别小于
2px，1px模糊在 Retina 屏上几乎不可见 - 需要精细控制时，用
filter: drop-shadow()替代，它不受盒模型限制，且 Safari 支持更稳，但不支持内阴影
真正难的不是写对那几行 CSS，而是得意识到：用户手指悬停的瞬间，视觉反馈必须比人眼反应快——延迟超过 0.1 秒，就会觉得“卡”。所以所有 transition 的时间、缓动、属性选择，本质上都是在和人类视觉暂留较劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
