卡片是界面里最常见的信息容器——它把一组相关内容装进一个独立的视觉单元，让用户能快速扫描、对比、点击。但"卡片"二字常被滥用：塞太多内容、阴影乱叠、hover 动效浮夸。这一节从结构、阴影、动效、内容优先级和图片处理五个角度，把卡片设计拆给你看。

卡片的骨架结构

一张标准卡片通常由三部分组成：媒体区（图片或封面）、内容区（标题、摘要、标签）、操作区（按钮或链接）。三者要有明确的视觉分组，但又不能割裂。最稳的做法是用统一的圆角容器包裹，内部靠间距而非分隔线来分区——分隔线会让卡片显得碎，间距则让它显得整。

<article class="card">
  <div class="card-media">
    <img src="cover.jpg" alt="卡片封面">
  </div>
  <div class="card-body">
    <span class="card-tag">教程</span>
    <h3>卡片设计入门</h3>
    <p>把相关信息组织进独立单元...</p>
    <div class="card-foot">
      <span>2026-07</span>
      <a href="#">阅读 →</a>
    </div>
  </div>
</article>

.card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #DFD9CC;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-body { padding: 24px 26px; }
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(74, 124, 58, 0.14);
}
.card:hover .card-media img { transform: scale(1.06); }

阴影层次：让卡片浮起来

阴影是卡片"浮起感"的来源，但最容易翻车。新手爱用纯黑高透明阴影，结果卡片像贴了层灰雾。正确做法是用主色系（这里用绿色）的低透明度阴影，并建立三档层次：sm 给静态卡片、md 给 hover、lg 给弹层。阴影的垂直偏移要大于模糊半径的一半，才会显得"有光从上方打下来"，而不是漂浮成一团。

.shadow-sm { box-shadow: 0 4px 16px rgba(74, 124, 58, 0.07); }
.shadow-md { box-shadow: 0 10px 36px rgba(74, 124, 58, 0.10); }
.shadow-lg { box-shadow: 0 24px 60px rgba(74, 124, 58, 0.14); }

hover 动效：克制的回应

hover 动效的目的是"回应"而非"表演"。上浮 6 到 10 像素、图片轻微放大 1.05 到 1.08、标题变色，这三件套足够。不要在 hover 时翻转卡片、弹出大图或播放动画——那是表演，会干扰用户扫描。动效时长 0.3 到 0.4 秒、缓动用 ease 即可，太短显得生硬，太长显得迟钝。整张卡片做成可点击区域，比单独一个"阅读更多"按钮更符合直觉。

内容优先级

卡片内容要有明确的阅读顺序：封面抓眼球、标题给信息、摘要补细节、操作引行动。标题用 17 到 19 像素、加粗；摘要用 13 到 14 像素、muted 色、最多两行省略。如果一张卡片塞了五六种信息，那它已经不是卡片，而是一个迷你页面——这时候该拆。

• 标题永远比摘要更重：更大、更深、更粗。
• 标签放标题上方，作为分类提示，不要抢标题视觉。
• 操作区只留一个主行动，多了就稀释转化。
• 摘要用 -webkit-line-clamp 限制两行，避免参差不齐。

图片处理

卡片图片最怕比例不一，导致网格错落。用 aspect-ratio 锁定比例（推荐 16:9 或 4:3），配合 object-fit: cover 裁切，无论原图尺寸都能填满容器。hover 时图片缓慢放大，配合容器 overflow: hidden 形成裁切效果，是最经典也最稳妥的卡片动效。

.card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #F5F1E6; }
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .card-media img { transform: scale(1.06); }