要实现悬浮感阴影，需设置正值y-offset（如4px）、blur-radius 8–12px、spread-radius约2px及浅色rgba；配合transition、will-change或transform启用gpu合成，避免布局触发，并通过@media或js适配触屏。
box-shadow 的基础参数怎么配才出悬浮感
阴影悬浮效果本质是让元素在 hover 时视觉上“抬升”，关键不是加阴影，而是控制阴影的 blur-radius、spread-radius 和 y-offset。默认的 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 常显得平、沉，缺乏立体反馈。
-
y-offset推荐用正值（如4px），模拟轻微上浮错觉；负值会让阴影压在元素下方，削弱悬浮感 -
blur-radius控制柔和度，8px–12px比4px更自然；过大会模糊边界，失去聚焦 -
spread-radius可设为2px左右，轻微扩大阴影范围，增强“离屏”暗示 - 颜色建议用
rgba(0,0,0,0.12)或更浅，避免压暗背景；深色主题下可用rgba(0,0,0,0.2)
hover 类如何写才能不闪跳、不卡顿
直接写 .card:hover { box-shadow: ... } 很常见，但容易触发重排或渲染抖动，尤其在低性能设备上。核心是让浏览器提前知道阴影会变，把变换“托付”给合成层。
- 给元素添加
will-change: transform或transform: translateZ(0)，强制启用 GPU 合成 - 避免同时在
hover中修改width、height、padding等触发布局的属性 - 阴影过渡必须显式声明
transition，否则默认无动画，看起来像突兀切换 - 过渡时间控制在
0.2s–0.3s，太短没感知，太长像迟滞
完整工具类写法示例（支持复用）
工具类应保持语义中立，不绑定具体组件名。下面这个 .shadow-hover 类可直接加在任意块级元素上：
.shadow-hover {
transition: box-shadow 0.25s ease;
will-change: transform;
}
.shadow-hover:hover {
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.12);
}
如果需要多级深度（比如按钮轻悬 vs 卡片强悬），可扩展为：.shadow-hover-sm、.shadow-hover-lg，分别对应不同 y-offset 和 blur-radius 组合。
立即学习“前端免费学习笔记（深入）”；
移动端 hover 失效怎么办
真机上 :hover 在触摸设备基本不可靠——iOS Safari 只在点击后短暂触发，Android Chrome 表现不一。不能只依赖 hover。
- 对重要交互（如按钮、卡片点击区），改用
:active模拟按下态，配合 JS 添加临时类实现“悬停即点击”的反馈 - 用媒体查询检测指针精度：
@media (hover: hover) and (pointer: fine)包裹纯hover样式，避免污染触屏设备样式表 - 若必须统一行为，推荐用 JS 监听
touchstart/mouseenter，动态加类，再用 CSS 过渡阴影
阴影本身没问题，问题常出在假设“hover 总存在”。真实项目里，hover 类只是桌面端锦上添花，不能作为核心交互依据。
