button:hover没阴影主因是box-shadow被背景、边框不透明或overflow:hidden裁剪，或z-index缺失致遮挡；需用开发者工具验证computed样式，并检查outline、filter、flex-wrap等干扰项。
button:hover 为什么没阴影？检查 box-shadow 是否被覆盖
很多情况下加了 box-shadow 却看不到，不是写错了，而是按钮的 background 或 border 没有透明度，或者父容器设置了 overflow: hidden 把阴影裁掉了。Flex 容器本身不干扰阴影，但常见错误是给按钮加了 position: relative 后又忘了设 z-index，导致阴影被兄弟元素盖住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具直接选中按钮，看 computed 样式里
box-shadow是否生效、值是否为none - 确保按钮没有设置
outline: none以外的遮挡属性（比如filter: blur()会干扰阴影渲染） - 如果按钮在
flex容器中且用了flex-wrap: wrap，注意阴影可能被相邻按钮的margin挤压变形——改用gap替代margin
Flex 布局下按钮组如何真正响应式？别只靠 flex-wrap
单纯用 display: flex + flex-wrap: wrap 不足以应对小屏断点，因为按钮宽度固定时，换行后高度不一致会导致对齐错乱，阴影也会因基线偏移显得“飘”。关键是要让按钮在不同视口下保持尺寸比例和间距逻辑统一。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
min-width: max-content或flex: 1 1 auto让按钮宽度自适应文字长度，避免小屏下文字溢出 - 配合媒体查询控制
flex-direction：大屏row，小屏column，比强行换行更可控 - 阴影用
em或rem单位（如box-shadow: 0 2px 6px rgba(0,0,0,0.15)），避免在缩放或高DPI屏下变糊
:focus-visible 和 :active 阴影反馈必须区分清楚
键盘用户按 Tab 进入按钮时触发的是 :focus-visible，鼠标点击瞬间是 :active，两者阴影行为不能一样。混用会导致可访问性失败（比如点击后阴影不消失，或键盘聚焦无反馈），也容易让视觉反馈“粘滞”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
:hover和:focus-visible用较轻的阴影（如0 1px 4px rgba(0,0,0,0.1)），:active用内阴影或位移+加深（如inset 0 1px 2px rgba(0,0,0,0.2)） - 禁用
:focus全局样式，只保留:focus-visible，避免鼠标点击后意外残留焦点环 - 移动端 Safari 对
:active支持不稳定，可加touch-action: manipulation提升响应
阴影性能隐患：filter vs box-shadow，别在动画里滥用
给按钮加 transition: box-shadow 0.2s 是安全的，但一旦换成 filter: drop-shadow() 或在 @keyframes 里频繁修改 box-shadow，就可能触发重排（layout）甚至强制 GPU 渲染，尤其在低端安卓机上卡顿明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 阴影过渡只作用于
box-shadow属性本身，不要连带transform或opacity一起动（除非真需要） - 避免在
will-change中声明box-shadow—— 浏览器不支持该属性对阴影的优化 - 按钮组数量多时（>6个），考虑用
clip-path或伪元素模拟阴影，减少绘制层级
阴影不是装饰，是交互状态的语言。最常被忽略的是：小屏下按钮文字折行后，line-height 变化会让阴影垂直偏移量看起来不对；还有就是深色模式下，硬编码的 rgba(0,0,0,0.2) 在暗背景上几乎不可见——得用 color-scheme: light dark 配合 prefers-color-scheme 切换阴影颜色。
