hover时底部阴影不出现，主因是z-index遮挡或overflow:hidden裁切；应检查父容器溢出设置、同级元素层级，并用position:relative+z-index:1提升阴影层；纯底部阴影需设offset-y为正值、spread-radius为负值。
hover 时底部阴影不出现？检查 box-shadow 的 z-index 层级关系
阴影本质是绘制在元素「背景层之上、内容层之下」的视觉效果，box-shadow 本身不触发堆叠上下文，但若父容器有 overflow: hidden 或子元素设置了 position: relative + z-index，阴影可能被裁切或遮挡。
- 确保目标元素没有父级
overflow: hidden（常见于卡片容器、导航栏） - 避免给同级兄弟元素设置过高
z-index，否则 hover 阴影会被盖住 - 如需强制提升阴影层级，可对元素自身加
position: relative和小数值z-index（如z-index: 1），但仅当必要时才用——它会创建新层叠上下文，影响后续定位逻辑
只想要底部阴影？用偏移值控制方向，别靠模糊半径硬撑
box-shadow 的四个关键参数顺序是：offset-x offset-y blur-radius spread-radius color。要实现「纯底部」效果，核心是把 offset-x 设为 0、offset-y 设为正值，并控制 blur-radius 和 spread-radius 避免向两侧扩散。
- 推荐写法：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)—— 负的spread-radius能收紧阴影底部边缘，减少左右晕染 - 慎用大
blur-radius（如 >20px）+ 零spread-radius，容易让阴影“浮起来”、失去底部锚定感 - 如果需要阴影随 hover 强度渐变，用
transition: box-shadow 0.2s ease，别忘了加在非 hover 状态上
移动端 hover 失效？不是 bug，是触摸设备无 hover 状态
iOS Safari 和多数安卓浏览器在触摸屏上不会触发 :hover（除非用户“长按”模拟，但不可靠）。指望 :hover 做交互反馈，在手机端基本无效。
- 真实场景中，应配合
:focus（用于可聚焦元素）或 JavaScript 的touchstart/touchend切换 class - 若只需视觉增强，可改用
:active（点击瞬间）：例如按钮按下时加底部阴影，但注意它不保持，只闪一下 - CSS 中可用
@media (hover: hover)包裹 hover 样式，避免干扰触摸设备解析（虽不影响功能，但更干净）
阴影颜色太生硬？用透明度替代纯黑，适配深色模式
写死 box-shadow: 0 4px 12px rgba(0,0,0,0.3) 在深色背景下会显得突兀，且无法响应系统配色偏好。
- 优先用
rgba(0,0,0,0.12)这类低透明度黑，比#000更柔和；深色模式下可搭配@media (prefers-color-scheme: dark)改为rgba(255,255,255,0.08) - 避免使用
hsl()或命名色（如gray），它们在不同主题下表现不稳定 - 如果项目已用 CSS 变量管理主题色，可定义
--shadow-bottom: 0 4px 12px rgba(0,0,0,0.12)，hover 时替换变量值而非重写整条声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
