box-shadow动画直接加transition无效，因它是复合属性，浏览器无法插值结构不同的阴影值（如none→有阴影）；必须保持参数数量、顺序、单位一致，且初始状态也需设为rgba透明阴影。
box-shadow 动画为什么直接加 transition 无效
因为 box-shadow 的值是复合属性（包含偏移、模糊、扩散、颜色），浏览器无法自动插值两个不同结构的阴影（比如从 0 0 0 #000 到 0 4px 12px rgba(0,0,0,0.15)），尤其当颜色透明度或单位混用时，动画会跳变或完全不触发。
解决的关键是：**始终使用相同数量、相同顺序、相同单位的 shadow 参数**，且避免在动画中切换「无阴影 → 有阴影」这种离散状态。
- ✅ 推荐写法：初始状态也设
box-shadow: 0 0 0 rgba(0,0,0,0)，悬停时改为0 4px 12px rgba(0,0,0,0.15) - ❌ 避免写法：
box-shadow: none→0 4px 12px ...（none是关键字，无法插值） - ⚠️ 注意：Chrome 120+ 对
rgba()与hsla()混用仍可能插值异常，统一用rgba()
卡片悬浮阴影增强的最小可靠代码片段
以下是一段可直接复制粘贴、兼容 Chrome/Firefox/Safari 的卡片阴影动效：
.card {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
说明：
-
cubic-bezier(0.34, 1.56, 0.64, 1)是刻意略带“弹性感”的缓动，比ease更显动态；数值超出 [0,1] 是合法且被广泛支持的 - 时间选
0.25s是平衡响应性与可观测性的常见值；超过0.3s易感知延迟，低于0.15s则动画“太急”失真 - 阴影扩散值（第三个参数）建议控制在
8px–16px之间：太小无增强感，太大边缘发虚、影响文字可读性
多层阴影叠加时的性能与渲染陷阱
用逗号分隔写多个 box-shadow（如内阴影 + 外阴影）虽视觉丰富，但容易引发重绘开销和 Safari 下的毛边问题。
- ⚠️ Safari 16–17 中，含
inset+ 多层外阴影的组合，在 Retina 屏上可能出现半像素模糊或闪烁 - ✅ 替代方案：只用一层外阴影做主增强，用
border或伪元素模拟“内提亮”效果（例如::before覆盖浅色渐变） - ? 性能提示：避免在
:hover中同时触发动画 +transform: scale()+box-shadow—— 三者叠加易导致低端设备掉帧；优先保transform（GPU 加速），阴影次之
深色模式下阴影颜色不能硬写 #000
直接写 rgba(0,0,0,0.15) 在深色背景下会过重，甚至让卡片“陷进去”。必须适配系统偏好。
- ✅ 正确做法：用
color-scheme: light dark配合@media (prefers-color-scheme: dark) - 示例：
@media (prefers-color-scheme: dark) { .card:hover { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08); } } - ⚠️ 注意：
rgba(0,0,0,...)和rgba(255,255,255,...)的 alpha 值不能简单等比例换算——深色模式下人眼对亮度更敏感，通常需把 alpha 降为浅色模式的 40%–60%
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
