名片卡片需用单侧弱投影（如0 1px 3px -1px rgba(0,0,0,0.08)）配合分层padding（整体1.25rem 1.5rem、姓名行下距0.375rem、职位行下距0.5rem、末行上距0.25rem）及圆角阴影协同，确保呼吸感、稳重感与多环境适配。
box-shadow 和 padding 配合得当，就能让名片卡片在无图片、无图标时依然有呼吸感和视觉锚点；关键不是加阴影，而是控制阴影的扩散半径与偏移量，避免“浮起来太假”。
box-shadow 的三个参数怎么选才不突兀
多数人一上来就写 box-shadow: 0 2px 8px rgba(0,0,0,0.1)，结果在浅色背景上像蒙了层灰。真正适合名片卡片的是「单侧弱投影 + 极小扩散」：
-
box-shadow: 0 1px 3px -1px rgba(0,0,0,0.08)—— 负的blur-radius（即第三个值）能收紧阴影边缘，-1px 是临界点，再小就看不见，再大就发虚 - 避免用
y-offset（第二个值）大于 2px，否则卡片像被往上托离背景，失去“贴在页面上”的稳重感 - 深色模式下记得用
@media (prefers-color-scheme: dark)调整rgba()的 alpha 值，比如改成rgba(255,255,255,0.06)，否则阴影会反向吃掉文字对比度
padding 不是“留白”，而是控制信息密度的节奏器
名片卡片里姓名、职位、联系方式排三行，如果统一用 padding: 1rem，上下两行会被压扁。正确做法是分层留白：
- 整体容器用
padding: 1.25rem 1.5rem（上下略大，左右略宽），保证文字不贴边 - 姓名行加
margin-bottom: 0.375rem，比职位行的margin-bottom: 0.5rem小——因为姓名是主视觉焦点，需要更紧凑的靠近感 - 最后一行（比如邮箱）用
margin-top: 0.25rem，而不是靠 padding 撑开，这样响应式缩放时不会破坏行间距比例
别忽略 box-shadow 在 border-radius 上的“断层”问题
当你给卡片加了 border-radius: 8px，但 box-shadow 还是直角扩散，阴影边缘就会和圆角不咬合，看起来像贴了张不匹配的膜。解决方法只有两个：
- 把
border-radius和box-shadow的数值保持同阶：比如border-radius: 0.5rem对应box-shadow的blur-radius不超过1.5rem（即 3×radius） - 更稳妥的做法是用
overflow: hidden包一层父容器，再让子元素带圆角和阴影——但注意这会裁掉伪元素或绝对定位内容，比如你后面想加个右上角小徽章就得额外处理
真正难的不是写出那几行 CSS，而是每次改一个值都得回看整张卡片在不同屏幕宽度、不同系统色温下的“轻重感”。box-shadow 的 alpha 值差 0.02，padding 差 2px，在高分辨率屏上就是信息是否“沉得住”的分界线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
