hover 时 box-shadow 不生效？检查是否被其他样式覆盖
最常见的现象是写好了 :hover 和 box-shadow，鼠标移上去却没反应。根本原因往往不是语法错，而是 box-shadow 被父容器的 overflow: hidden 截断，或者卡片本身有 transform: translateZ(0) / will-change: transform 等触发层叠上下文后，阴影渲染被限制在该层内。
- 先确认卡片父容器没有
overflow: hidden—— 如果必须用，可改用overflow: clip（现代浏览器支持）或给卡片加足够margin预留阴影空间 - 避免在卡片上滥用
transform或will-change；若需动画，优先用translateY()配合box-shadow，而非同时触发新层叠上下文 - 阴影默认绘制在元素“下方”，但若卡片设置了
z-index且父容器层叠上下文不明确，可能被遮挡；建议统一用position: relative+ 显式z-index控制层级
box-shadow 参数怎么配才自然？别只调模糊值
box-shadow 的四个关键参数顺序是：水平偏移、垂直偏移、模糊半径、扩散半径（可选）、颜色。悬浮阴影要真实，核心是模拟“略抬升+轻微受光”效果，不是越黑越大越好。
- 垂直偏移用正值（如
4px），模拟卡片微微上浮；水平偏移通常设为0，避免视觉漂移 - 模糊半径（
8px–12px）和扩散半径（2px–4px）配合使用：模糊太大显虚、太小显硬；加一点正扩散能让阴影边缘更柔和、更有体积感 - 颜色别用纯黑；推荐
rgba(0, 0, 0, 0.12)或hsla(0, 0%, 0%, 0.16)，透明度控制在0.12–0.2之间更贴近真实光照 - 示例：
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.16);
需要过渡动画？transition 必须写在非 hover 状态下
很多人把 transition 写在 :hover 里，结果鼠标移入有动画、移出直接跳变——因为移出时样式还原，但 transition 没定义在基础状态。
-
transition属性必须加在默认（非 hover）的卡片选择器上，例如.card { transition: box-shadow 0.2s ease; } - 不要用
all做过渡目标；只写明要动的属性，比如transition: box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);，既精准又避免意外性能开销 - 时间控制在
0.2s–0.25s最舒服；过长显拖沓，过短像没动
深色模式下阴影发灰？用 prefers-color-scheme 动态适配
在深色背景上，同一组 rgba(0,0,0,0.16) 阴影会显得过重甚至发灰，不是 bug，是对比度失衡。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询检测系统偏好：
@media (prefers-color-scheme: dark) { .card:hover { box-shadow: 0 4px 12px 2px rgba(255, 255, 255, 0.08); } } - 深色模式下，改用白色/浅灰高透明度阴影，保持“提亮感”而非“压暗感”
- 如果项目已用 CSS 自定义属性（
--shadow-color），可结合:root和@media统一管理，避免重复写死
overflow 和 transition 的位置。这两个点卡住，其他都调得再准也没用。 
