box-shadow过渡无效是因为初始值为none，需设为0 0 0 rgba(0,0,0,0)；浮起效果应配合transform translatey和z-index提升，并注意ios渲染闪烁及阴影参数平衡。
box-shadow 过渡为什么没反应？
直接写 transition: all 0.3s 却看不到阴影变化，大概率是 box-shadow 初始值为 none 或未声明默认值。CSS 过渡不支持从 none 到具体值的插值，必须用明确的数值起始点。
- ✅ 正确做法：初始状态设为
box-shadow: 0 0 0 rgba(0,0,0,0)（零偏移、零模糊、全透明） - ❌ 错误写法：
box-shadow: none;—— 浏览器无法计算过渡中间帧 - 过渡属性建议写全：
transition: box-shadow 0.3s ease, transform 0.3s ease，避免all触发意外重绘
浮起效果要配 transform 吗？
纯 box-shadow 只能加阴影，视觉“浮起”感需要纵向位移配合。单独改 top 会触发 layout，而 transform: translateY(-4px) 是合成层操作，更流畅。
- 推荐组合：悬停时同时增强阴影 + 微上移，例如
transform: translateY(-4px); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.15) - 注意 z-index：如果卡片有兄弟元素遮挡，需确保悬停时
z-index更高（如从1→2），否则阴影被裁剪 - 移动端慎用：部分 iOS Safari 对
transform+box-shadow组合存在渲染闪烁，可加will-change: transform缓解（但勿滥用）
阴影参数怎么调才自然？
box-shadow 四个数值顺序是 offset-x offset-y blur-radius spread-radius color，浮起阴影的关键在 offset-y 和 blur-radius 的比例。
- 真实感要点：阴影偏移略小于浮起高度（如
transform: translateY(-4px)对应box-shadow: ... 4px ...），且带轻微扩散（spread-radius设为负值收束阴影边缘） - 常用安全值：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1)—— 模糊适中、边缘干净、不压文字 - 避免踩坑：过大的
blur-radius（如 >30px）在高缩放比屏幕下易发虚；spread-radius为正数会让阴影“膨胀”，破坏浮起错觉
伪类 hover 在哪些场景会失效？
卡片用 div 包裹但悬停无反应，常见于父容器截断事件流或元素不可交互。
- 检查是否设置了
pointer-events: none（尤其在遮罩层、图标父容器上） - 卡片内容含
a或button时，hover 写在子元素上可能不触发父卡片样式，应统一写在最外层容器 - 使用
:focus-within可补充键盘导航支持，例如：&:hover, &:focus-within { ... } - SSR 或动态插入的卡片，确保 DOM 已挂载再绑定样式；若用 JS 控制 class，注意 class 名与 CSS 选择器严格匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
