hover阴影不出现需显式声明transition: box-shadow 0.2s ease；悬浮卡片应改用position: relative而非float；box-shadow四参数须理解物理意义；移动端:hover不可靠，需用媒体查询降级。
hover时阴影不出现？检查transition是否遗漏
阴影变化本质是属性动画，box-shadow本身不带过渡效果。没加transition，hover一瞬切换会显得生硬甚至“卡住”，部分浏览器（如旧版Safari）可能直接不渲染过渡帧。
- 必须显式声明
transition: box-shadow 0.2s ease;，不能只写transition: all 0.2s;——某些浏览器对all的兼容性差，且会意外触发其他属性重绘 - 时间值建议在
0.15s–0.3s之间：太短看不出变化，太长拖慢交互反馈 - 如果卡片用了
transform: translateY(-4px);配合阴影，记得把transform也加入transition，否则位移和阴影不同步
浮动卡片悬浮后遮挡其他元素？优先用position: relative替代float
真正在做“悬浮卡片”时，float早已不是合理选择。它会脱离文档流、引发父容器塌陷、与相邻元素产生不可控间隙，hover放大或加阴影后更容易溢出或盖住内容。
- 改用
position: relative;+z-index: 10;控制层叠，hover时再提升z-index: 100; - 若需多卡片水平排列，用
display: inline-block;或display: flex;代替float: left;，避免清除浮动的麻烦 - 务必给卡片设置明确的
width和max-width，否则box-shadow扩展会撑破容器边界
box-shadow参数调不好？记住四个值的物理意义
阴影模糊半径和扩散半径容易混淆，导致hover后阴影“糊成一片”或“缩在角落”。关键不是背数值，而是理解每个参数对应什么：
- 第一个值（
h-offset）：水平偏移，正数向右，负数向左 - 第二个值（
v-offset）：垂直偏移，正数向下，负数向上（hover上浮时这里常用负值） - 第三个值（
blur-radius）：越小越锐利，建议8px–16px之间，超过24px易发虚 - 第四个值（
spread-radius）：控制阴影大小扩张，0最自然；正数扩大整体阴影范围，负数收缩（慎用，易让阴影变窄失真）
示例：悬浮上提+柔和阴影 → box-shadow: 0 -4px 12px -2px rgba(0,0,0,0.15);
立即学习“前端免费学习笔记（深入）”；
移动端hover失效？别依赖:hover做核心交互
触摸设备没有“悬停”概念，:hover在iOS Safari、Android Chrome中仅在模拟鼠标（如外接蓝牙鼠标）时触发，多数情况完全不响应。把它当视觉增强可以，但不能作为功能入口。
- 如果卡片点击后要展开详情，hover效果只能是锦上添花，主逻辑必须绑定
click或tap - 想兼顾触屏，可用
@media (hover: hover) and (pointer: fine)媒体查询包裹hover样式，避免触屏设备加载冗余CSS - 测试时务必在真机上点一点——模拟器里的hover常常骗人
复杂点在于：阴影层级、过渡节奏、触屏降级这三者得一起调。调完PC端觉得完美，切到iPad发现全没反应，这种事发生过太多次了。
