CSS 卡片样式：别再堆阴影和圆角了，先想清楚它“站在哪儿”

你是不是也这样：打开 Figma 画好一张卡片，配色、留白、图标都调得挺顺眼，一到写 CSS 就下意识敲 border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); ——然后发现它在页面里“飘”着，跟上下内容不搭界，点击区域小得要凑近看，深色模式下灰扑扑一片，甚至在折叠屏上直接被截掉半张脸？

卡片不是装饰贴纸，它是信息的容器，更是用户视线的落脚点。真正好用的卡片，从来不是靠一堆视觉参数堆出来的，而是由它的上下文定义出来的。

先看一个常被忽略的事实：同一张卡片，在列表页、详情页弹窗、侧边栏推荐位、移动端横滑流里，该长什么样？答案是——很可能完全不同。
比如列表页里的商品卡片，需要快速扫读，主信息必须一眼锚定，图片尺寸、标题行高、价格字号得形成稳定节奏；而知识卡片（比如“CSS Grid 布局要点”）放在文档右侧，就得克制：去掉多余阴影，留白收窄，字号略小，让它甘当配角，不抢正文风头。

所以动笔写 CSS 前，先问自己三个问题：
它承载什么信息？谁在什么时候看它？它周围有什么？
这三个问题的答案，直接决定你该用 flex 还是 grid、要不要用 aspect-ratio、阴影该用单侧还是悬浮态、甚至圆角该不该统一设成 8px。

说到圆角，很多人默认“卡片就得圆”。但真实场景中，圆角是有情绪的。产品功能入口卡用稍大的圆角（10–14px），带点亲和力；后台数据监控卡片用 4–6px 微圆角，显得稳、准、不抢戏；而某些强调专业感的 API 文档卡片，干脆用直角——不是不能圆，是直角在这里反而更“可信”。

阴影也是同理。box-shadow: 0 2px 8px rgba(0,0,0,0.06) 看似安全，但放在深色背景上就发灰，放在浅色卡片叠浅色背景上又几乎看不见。更务实的做法是：用 backdrop-filter: blur(4px) 配合半透背景做“毛玻璃”浮层效果，或者干脆放弃全局阴影，只在 hover/active 时加一条底部 border 或轻微上移位移（transform: translateY(-2px)）——轻量、可感知、不破坏层次。

布局上，别急着套 .card { display: flex; flex-direction: column; }。试试这个组合：

.card {
  display: grid;
  grid-template-areas:
    "img  header"
    "img  body"
    "img  footer";
  gap: 0.75rem;
}
.card-img { grid-area: img; }
.card-header { grid-area: header; }
.card-body { grid-area: body; }
.card-footer { grid-area: footer; }

好处是什么？图片高度自适应时，文字区域不会被撑歪；换设备宽度，只需改 grid-template-areas 就能重排（比如移动端变成 "img" "header" "body" "footer"）；语义清晰，无障碍阅读器也能按逻辑顺序播报。

交互细节常被牺牲，但恰恰最影响手感。比如点击区域：图标按钮只有 24×24px？那就在父元素上加 padding: 0.5rem，再用 margin: -0.5rem 把视觉边界拉回来——有效点击区够大，视觉焦点仍干净。又比如悬停反馈，别只改颜色。试试 transition: all 0.2s ease 配合 transform: scale(1.01)，微小但确定，像轻轻按下物理按键。

深色模式不是“换个 background-color”就完事。卡片背景用 color-scheme: light dark 声明后，系统会自动切换 background-color 和 color，但阴影、边框、分割线这些容易漏。更稳妥的是：

.card {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
@media (prefers-color-scheme: dark) {
  .card {
    background-color: color-mix(in srgb, currentColor 5%, white);
  }
}

用 color-mix 动态混合，比写死两个色值更耐看，也更容易维护。

最后说个反直觉的点：卡片的“呼吸感”，往往来自它外面的间距，而不是里面的 padding。
很多团队拼命调 .card > * { margin-bottom: 1rem; }，结果卡片一密集排列就糊成一片。不如把重点放在卡片之间：.card + .card { margin-top: 1.5rem; }，再配合 :first-child 和 :last-child 重置首尾间距。这样，卡片本身可以更紧凑，整体节奏反而更清爽。

写完卡片样式，别急着提交。关掉设计稿，打开浏览器，用键盘 Tab 键走一遍焦点顺序；缩放到 300%，看文字是否依然可读；切到深色模式，检查所有边框和图标是否还存在；把窗口拖到 iPad 横屏宽度，看网格有没有错行……
卡片不是终点，是用户旅程中的一个踏脚石。它站得稳不稳，不取决于你写了多少行 CSS，而取决于你有没有看清它脚下那块地。

下次再写 .card，先停三秒——问问它，今天要去哪儿。