按钮悬停无阴影需检查:hover是否被覆盖，确保声明顺序正确、避免overflow:hidden或box-shadow:none干扰；“浮起感”靠垂直偏移+负扩散值（如-2px）实现；移动端须用:active或javascript补充点击反馈；性能卡顿应限制transition范围并降低模糊值。
按钮悬停时阴影不出现？检查 :hover 选择器是否被覆盖
最常见的问题是写好了 :hover 样式，但悬停后阴影毫无反应。这通常不是语法错误，而是 CSS 特异性（specificity）或声明顺序导致的覆盖。比如父容器设置了 overflow: hidden，或者按钮本身有 box-shadow: none 写在了 :hover 后面。
实操建议：
- 用浏览器开发者工具检查按钮元素，确认
:hover状态下box-shadow是否被 strike-through（划掉） - 确保
:hover规则在普通状态规则之后声明（CSS 从上到下解析） - 避免用
!important强行覆盖，优先提升选择器特异性，例如把button:hover改为.btn-primary:hover - 若按钮是内联元素（如
<a></a>），需先加display: inline-block或display: block，否则部分阴影可能被裁切
box-shadow 的四个参数怎么配出“浮起感”
阴影要像按钮真的抬起来了，关键不在模糊值（blur），而在偏移量（x/y）与扩散值（spread）的配合。纯水平/垂直偏移 + 小扩散 + 中等模糊，比大模糊更显立体。
典型“浮起”配置示例：
button {
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2);
}
button:hover {
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}
说明：
- 第1个值（
0）：水平偏移，保持为 0 避免左右晃动 - 第2个值（
2px/4px）：垂直偏移，增大它让阴影向下拉长，模拟“抬升”错觉 - 第3个值（
6px/12px）：模糊半径，控制柔和度，不宜过大（＞20px 易失真） - 第4个值（
-2px）：扩散半径为负，收缩阴影边缘，让投影更贴合按钮底部，增强真实感 - 颜色用
rgba()控制透明度，避免生硬黑影；0.2～0.35是较自然的范围
移动端点击无反馈？:hover 在触摸设备上不可靠
iOS 和 Android 大多数浏览器对 :hover 支持有限：首次点击才触发 hover，且不会持续。这意味着纯 :hover 的阴影在手机上基本失效，用户点下去没视觉反馈。
解决方案必须兼顾触控：
- 用
:active补充点击态：button:active { box-shadow: 0 1px 3px rgba(0,0,0,0.15); }（比 hover 更轻，模拟按压） - 更稳妥的做法是加 JavaScript 监听
touchstart/touchend，动态添加类（如.is-pressed），再用 CSS 控制该类下的阴影 - 别依赖
:hover做核心交互提示——它本质是桌面光标行为，不是交互状态标识
阴影性能卡顿？避免在动画中频繁重绘 box-shadow
如果给 box-shadow 加了 transition 却发现滚动或悬停时掉帧，问题常出在浏览器重绘区域过大。阴影属于“昂贵属性”，尤其模糊值高、尺寸大时。
优化要点：
- 只过渡
box-shadow本身：transition: box-shadow 0.2s ease;，不要写all 0.2s - 对高密度按钮列表（如导航栏），考虑用
will-change: box-shadow提前告知浏览器，但仅在必要时启用（会增加内存开销） - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看悬停时绿色闪烁区域是否过大；若整个按钮都被刷绿，说明重绘成本高，应减小模糊值或改用
transform: translateY(-2px)辅助模拟浮起（更轻量）
:hover 在触屏上的缺失和阴影参数中负扩散值（-2px）对真实感的提升作用——前者导致移动端体验割裂，后者稍作调整就能让按钮从“有阴影”变成“真浮起来了”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
