卡片阴影应精准而非厚重，需协调方向、模糊度、偏移与颜色；推荐安全值如0 2px 8px rgba(0,0,0,0.1)；宜用透明黑灰而非纯黑，可依背景微调色相；多层阴影（如两层递增偏移与模糊）增强真实感；配合transition实现自然hover交互。
卡片阴影用 box-shadow 实现，关键不是加得“重”，而是加得“准”——方向、模糊度、偏移和颜色要配合内容层级和背景协调。
基础语法别写错
box-shadow 的基本格式是：
新手常漏掉前两个值，或把模糊值设太大导致边缘发虚看不清。实际做卡片时，推荐从这组安全值起步：
-
轻微浮起感：
box-shadow: 0 2px 8px rgba(0,0,0,0.1); -
稍明显悬停态：
box-shadow: 0 4px 12px rgba(0,0,0,0.15); -
点击/激活态（可选）：
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
阴影颜色别硬套黑色
纯黑（#000）在浅底上太生硬，容易显得“脏”。更自然的做法是用带透明度的黑灰，比如 rgba(0,0,0,0.08)～rgba(0,0,0,0.2)。如果卡片背景偏暖（如米白、浅灰蓝），还可微调阴影色相：
立即学习“前端免费学习笔记（深入）”；
- 浅米色背景 → 用
rgba(30,30,30,0.1)（略带灰褐） - 深灰背景 → 改用
rgba(255,255,255,0.05)（浅白高光式阴影）
用多层阴影做出真实感
单层阴影扁平，两层就能模拟光线折射效果。例如：
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.12);第一层轻、近、细（模拟紧贴卡片的投影），第二层稍重、远、柔（模拟环境光扩散）。注意两层垂直偏移递增，模糊值也递增，才符合物理逻辑。
配合 hover 和 transition 让交互自然
卡片悬停时增强阴影，但别突兀跳变。加上平滑过渡：
- 给卡片默认状态加
transition: box-shadow 0.2s ease; - hover 时只改
box-shadow值，不改其他属性（避免重排） - 示例：
card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
