css新手项目如何做卡片阴影_使用box shadow增加层次

卡片阴影应精准而非厚重，需协调方向、模糊度、偏移与颜色；推荐安全值如0 2px 8px rgba(0,0,0,0.1)；宜用透明黑灰而非纯黑，可依背景微调色相；多层阴影（如两层递增偏移与模糊）增强真实感；配合transition实现自然hover交互。

卡片阴影用 box-shadow 实现，关键不是加得“重”，而是加得“准”——方向、模糊度、偏移和颜色要配合内容层级和背景协调。

基础语法别写错

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); }