卡片核心是圆角+微阴影：border-radius: 8px + box-shadow: 0 2px 6px rgba(0,0,0,0.08)，配合 overflow: hidden、padding 控制内边距、font-weight/line-height 区分文字层级、max-width 响应式约束。
用 border-radius 和 box-shadow 快速做出卡片轮廓
卡片最核心的视觉特征就是圆角 + 微阴影，不是靠图片或复杂布局。直接在容器上加这两条 CSS 就能立竿见影：
-
border-radius: 8px是安全值：小屏不突兀，大屏不生硬；设成0或12px以上容易失衡 -
box-shadow: 0 2px 6px rgba(0,0,0,0.08)是推荐起手式：数值太大会像浮空，太小（如0 1px 2px）在高分屏上看不见 - 别漏掉
overflow: hidden—— 后续如果往卡片里塞带圆角的图片或头像，边缘会意外溢出
卡片内边距用 padding 而不是 margin
新手常把 margin 当作“卡片呼吸感”，结果导致外层布局错位（比如 Flex 容器里 margin 不参与对齐，或 Grid 中被折叠）。正确做法是：
- 统一用
padding: 16px控制内容与边框距离；需要顶部/底部留白更多？改用padding-top: 20px单独调 - 如果卡片要等高排列（如商品列表），
padding比margin更可控 —— margin 会塌陷，padding 不会 - 避免写
padding: 1rem：rem 在不同根字体下表现不稳定，卡片样式应尽量脱离全局 font-size 干扰
文字层级靠 font-weight 和 line-height 区分，不是靠颜色
很多“卡片模板”滥用 color: #333 / #666 / #999 做标题/正文/辅助文字，结果在深色模式下全糊成一片。更鲁棒的做法是：
- 标题用
font-weight: 600+line-height: 1.4，正文用font-weight: 400+line-height: 1.6—— 层级靠节奏，不靠色值 - 辅助文字（如时间、标签）用
font-size: 0.875em+line-height: 1.5，比单纯调低 opacity 更易读 - 绝对不要用
color: #ccc做禁用态文字 —— 它在浅灰背景上对比度不足，WCAG 会报错
响应式断点只加在 max-width 上，别碰 width
卡片宽度写死（如 width: 320px）是最大陷阱。移动端撑不满，桌面端又缩太小。真正该控制的是最大宽度：
立即学习“前端免费学习笔记（深入）”；
- 默认让卡片自然包裹内容（即不设
width），只加max-width: 100%防止超宽 - 在 768px 断点加
max-width: 360px，在 1024px 加max-width: 400px—— 数值来自真实内容宽度测试，不是凭空定的 - 如果卡片必须等宽（如后台数据看板），用
flex: 0 0 300px替代width: 300px，这样 flex 容器才好分配剩余空间
圆角、阴影、内边距、文字节奏、宽度约束——这五处不动，卡片就不会“看起来不像卡片”。其他装饰性样式（图标、渐变、hover 动画）都是可选配件，先确保骨架干净再加。
