box-shadow悬停不自然主因是偏移量与模糊半径未协同过渡，应微调偏移（±2–4px）、适度增大模糊（+20%～30%），配合transition: box-shadow 0.2s ease及transform位移，并依背景色动态调整rgba透明度。
box-shadow 为什么悬停时阴影不自然
直接写 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 再加 :hover 改参数，容易出现“跳变感”或“浮得太高”——本质是阴影扩散值（第三个参数）和偏移量（前两个）没配合过渡。阴影不是纯装饰，它得模拟真实光源距离变化。
- 偏移量（如
0 4px）建议 hover 时只微调 2–4px，别从 0 突变到 8px - 模糊半径（如
12px）可增大 20%～30%，比如16px，但别翻倍，否则边缘发虚 - 必须加
transition: box-shadow 0.2s ease，且和 transform 过渡时间保持一致 - 别只过渡
box-shadow，漏掉transform会让卡片像“被顶起来”而不是“升起来”
定位用 relative 还是 absolute
悬浮卡片绝大多数场景该用 position: relative，不是 absolute。用 absolute 容易脱离文档流，导致父容器高度塌陷、兄弟元素上移，尤其在 Grid/Flex 布局里会连锁出错。
-
relative保证卡片仍在流内，hover 时位移不影响布局，top或transform: translateY(-4px)都安全 - 只有当需要脱离父容器限制（比如下拉菜单盖住下方内容），才考虑
absolute+z-index - 如果用了
absolute，父容器必须设position: relative作定位上下文，否则会相对 viewport 定位 -
transform位移比top/left更推荐：不触发重排，性能好，且和阴影过渡更同步
阴影颜色和透明度怎么选才不脏
用 rgba(0,0,0,0.15) 是常见起点，但实际要根据背景色动态调整。白底上太浓显灰，深色背景上太淡又看不见，而且纯黑阴影缺乏环境光感。
- 浅色背景（#fff / #f9f9f9）：用
rgba(0,0,0,0.08) ~ 0.12)，模糊值可略高（12–16px） - 深色背景（#1e1e1e / #2d2d2d）：改用
rgba(255,255,255,0.06)，方向建议0 -2px模拟顶光 - 避免用
hsla()或带色相的阴影，除非设计系统明确要求（如品牌蓝影），否则易和内容冲突 - 多层阴影（逗号分隔）慎用：两层还行，三层以上在低端设备上可能糊边或闪烁
移动端 hover 失效怎么办
手机没有 hover，但用户点按后卡片需要反馈。不能只靠 :hover，得补一层 :active 或 JS 的 touchstart 状态。
- CSS 层面：给卡片加
&:active { transform: translateY(0); box-shadow: ...; }，让它点下去瞬间“落回原位” - 更稳妥的是用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免触屏设备误加载 - 如果卡片有 JS 交互（如展开详情），优先用 class 切换（
.is-hovered/.is-pressed），CSS 和逻辑解耦 - 注意 iOS Safari 对
transform的渲染延迟，加will-change: transform可缓解，但别滥用
阴影不是加了就完事，它和定位、过渡、色彩、设备能力全绑在一起。最容易忽略的是：同一套阴影参数，在深色模式下几乎不可见，而很多人只在默认主题里调了一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
