css3怎样做卡片阴影

在 CSS3 中，给“卡片（card）”加阴影最常用的就是 box-shadow 属性。下面从基础到进阶给你讲清楚。

一、最基础的卡片阴影

.card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

box-shadow 参数说明

box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色;

示例：

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

• 0：水平偏移（向右为正）
• 4px：垂直偏移（向下为正）
• 12px：模糊程度
• rgba(0,0,0,0.15)：半透明黑色阴影

二、更真实的“悬浮卡片”阴影

hover 时阴影变深，有交互感：

.card {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

三、多层阴影（更柔和自然）

.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.08);
}

适合：

• 卡片列表
• 后台管理系统
• 电商商品卡

四、内阴影（凹陷效果）

.card {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}

五、彩色阴影（品牌感）

.card {
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
}

六、现代 UI 常用阴影方案（推荐）

.card {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

或者 Material Design 风格：

.card {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),
              0 2px 4px -2px rgba(0,0,0,0.1);
}

七、配合 transform 做悬浮动效

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

如果你愿意，我可以：

• 给你一套 卡片组件完整 CSS
• 或按 某框架（Tailwind / Element / Ant Design） 来写
• 或做 暗黑模式阴影方案

你用的是哪种场景？