:hover 实现复杂特效需同步控制 transform 与 box-shadow 过渡、避免重排、适配移动端：必须用显式 transition 声明绑定两者，禁用 transition: all；移动端须用 focus 或 js 双事件模拟；注意父容器 overflow、will-change 及像素对齐问题。
直接用 :hover 实现“复杂”特效，本质是组合多个 CSS 属性过渡，但必须同步控制、避免重排、绕过移动端失效——不是加得越多越炫，而是每项改动都得有明确目的和 fallback。
为什么 transform + box-shadow 必须一起过渡
只动 transform: translateY(-6px) 而不改阴影，卡片像“飘起来但影子钉在地上”；只加深 box-shadow 而不位移，又像“压扁没抬起”。两者必须用同一 transition 声明绑定：
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }.card-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.2); }- 不能写
transition: all 0.3s——边框、背景色、字体大小等无关属性也会动，干扰视觉焦点 - 时间值保持一致（如都是
0.3s），否则出现“先升后影”或“影到升未到”的割裂感
移动端点击无反馈？别信 @media (hover: hover)
iOS Safari 真机常把 @media (hover: hover) 判为 false，纯 CSS :hover 在触摸设备上基本不可靠。实际能落地的方案只有两个：
- 给卡片加
tabindex="0"，再写.card:focus { transform: translateY(-6px); box-shadow: ...; }——键盘 Tab 和触屏点按都能触发 - 用 JS 切换类（如
is-hovered），但必须监听touchstart+click双事件，且在touchend后清状态，否则快速连点会残留动画 - 绝对不要依赖
:active做主要反馈——它只在按下的瞬间生效，松开就消失，用户根本来不及感知
父容器裁掉阴影或边缘模糊？先查 overflow 和 will-change
写了三行 CSS 却发现阴影被砍、文字变糊、卡片移出后卡住，90% 是父级容器惹的祸：
- 检查是否套在
.card-group、.row或自定义 wrapper 里——它们常带overflow: hidden，而box-shadow和transform渲染区域会被硬裁 -
will-change: transform要加在常态规则里（.card { will-change: transform; }），但别滥用：加太多会提前创建图层，反而拖慢渲染 - 如果用了
h-100，确认父级.row没设align-items-start——悬停上移后卡片底部会露白边 - 阴影变糊？不是 CSS 写错，是 GPU 合成层没对齐像素——把
translateY(-6px)改成translateY(-6.5px)常能缓解（Chrome 128+ 已优化，但旧安卓 WebView 仍敏感）
真正难的不是写出多炫的动画，而是让 transform、box-shadow、z-index、overflow 四者在各种设备和嵌套层级下互不打架——多数翻车现场，代码本身没错，错在没看全上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
