box-shadow加transition失效是因为缺少初始值，需显式定义如box-shadow: 0 0 0 transparent;；grid中阴影被裁切需避免overflow:hidden，改用clip-path或外层包div；悬浮时布局跳动应配合transform和z-index；移动端需用@media区分hover与touch交互。
为什么直接给 box-shadow 加 transition 会失效
常见错误是只写 transition: box-shadow 0.3s;，但没配 box-shadow 的初始值。CSS 过渡要求「起始态」和「结束态」都必须有明确值，如果初始没有声明 box-shadow（即为 none），浏览器无法插值计算动画路径，导致悬停时阴影“啪”一下跳出来，没有渐变效果。
实操建议：
- 卡片容器必须显式定义
box-shadow: 0 0 0 transparent;或box-shadow: 0 2px 6px rgba(0,0,0,0.08);作为起始态 -
transition推荐写全属性：transition: box-shadow 0.3s ease, transform 0.3s ease;（后续加位移更自然） - 避免用
transition: all 0.3s;—— 它会意外触发重排或重绘，尤其在 Grid 子项上可能引发布局抖动
Grid 容器怎么设才能让卡片阴影不被裁切
阴影本质是绘制在元素盒模型外部的视觉层，如果 Grid 容器设置了 overflow: hidden，或者子项用了 transform: translateZ(0) 等触发层叠上下文但未预留空间，阴影就会被截断。
实操建议：
- Grid 容器不要设
overflow: hidden；如需圆角遮罩，改用clip-path: inset(0 round 12px);（更安全） - 每张卡片加
margin预留阴影空间，例如：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))));+ 卡片margin: 12px; - 若必须用
overflow: hidden（比如卡片带圆角图层叠加），可在卡片内层再包一层div，把box-shadow放在外层，内容区域设overflow: hidden
如何让悬浮动画在 Grid 布局中保持视觉稳定
单纯加 box-shadow 会让卡片“变厚”，导致下方卡片上移、网格线晃动。真实项目里用户会明显感知到布局跳动，破坏沉浸感。
实操建议：
- 用
transform: translateY(-4px);替代仅靠阴影撑开空间，配合z-index: 1;提升层级，既抬高卡片又不挤占文档流 - 确保所有卡片高度一致：用
align-items: start;（Grid 容器）+ 卡片内min-height: 200px;或height: 100%; - 阴影扩散方向要收敛：推荐
box-shadow: 0 8px 16px -4px rgba(0,0,0,0.12);，其中负的模糊偏移（-4px）能收紧光晕，减少视觉膨胀感
移动端触摸设备下的兼容性注意点
iOS Safari 和部分安卓 WebView 对 :hover 支持不稳定——首次点击可能不触发，或悬停状态残留。纯 CSS 方案在这里不可靠。
实操建议：
- 用
@media (hover: hover) and (pointer: fine)包裹悬停样式，避免触屏设备加载无用过渡逻辑 - 对触屏设备，改用
:active模拟按下反馈：card:active { transform: translateY(-2px) scale(1.01); } - 真需要悬停态持久化（比如工具提示），得加轻量 JS 监听
touchstart并切换 class，别依赖伪类
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
