box-sizing: border-box 是名片卡片布局的第一道防线，它确保 width/height 包含 padding 和 border，避免宽高计算偏移导致卡片撑出容器或文字截断。
为什么 box-sizing: border-box 是名片卡片布局的第一道防线
不做这步，所有宽高计算都会偏移——尤其当加了 padding 或 border 后，卡片突然撑出容器、文字被截断，就是典型症状。
默认 box-sizing: content-box 会让 width: 300px 只算内容区，加上 padding: 20px 和 border: 2px，实际占位变成 344px。名片卡片通常嵌在网格或 flex 容器里，这种“悄悄变胖”直接破坏对齐。
- 全局重置更省心：
* { box-sizing: border-box; }，但注意重置后第三方组件样式可能受影响 - 局部加更稳妥：给名片卡片容器（比如
.card）单独设box-sizing: border-box - 别漏掉伪元素：如果用
::before做装饰边框，也得显式声明box-sizing: border-box，否则它仍按 content-box 算
阴影不是加得越多越高级：box-shadow 的层级与性能陷阱
名片卡片常用双层阴影（内阴影 + 外阴影）营造立体感，但 box-shadow 层叠顺序固定：后写的在上层，且无法用 z-index 调整。更关键的是，模糊半径（blur-radius）超过 20px 时，Chrome 渲染开销明显上升，滚动时容易掉帧。
- 外阴影控制在
box-shadow: 0 4px 12px rgba(0,0,0,0.1)范围内，兼顾真实感和性能 - 内阴影慎用：
inset阴影会触发全层重绘，若卡片有动画，建议改用border+background-clip模拟 - 避免多层叠加写法：
box-shadow: 0 2px 4px #000, 0 4px 8px #000→ 实际只需一个复合值：box-shadow: 0 4px 12px rgba(0,0,0,0.15)
圆角与溢出裁剪的冲突：当 border-radius 遇上 overflow: hidden
名片头像常是圆形，靠 border-radius: 50% 实现；但若头像用 img 标签且未设置 display: block，底部会留白——这是行内元素的基线对齐导致的。更隐蔽的问题是：卡片整体设了 border-radius，但内部子元素（如二维码图片）超出边界时，overflow: hidden 并不能完美裁剪圆角区域，尤其在 Safari 下边缘可能出现锯齿或渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 头像图片加
display: block或vertical-align: top消除底部空白 - 卡片容器设
overflow: hidden前，先确认子元素没用transform（如scale()），否则 Safari 会失效 - 真要兼容老 Safari？用
clip-path: circle(50% at 50% 50%)替代border-radius，但注意它不支持动画
响应式断点下阴影和圆角的退化处理
小屏设备（尤其是手机）上，过大的阴影和过尖锐的圆角会挤压内容空间，视觉上反而显得廉价。但直接用媒体查询删掉 box-shadow 或 border-radius 也不行——用户会感觉卡片“塌了”，失去设计一致性。
- 移动端把外阴影改为单向：
box-shadow: 0 2px 6px rgba(0,0,0,0.08)，去掉横向扩散 - 圆角值随屏幕缩放：
border-radius: clamp(8px, 4vw, 12px)，既保形状又防过大 - 别忽略触摸反馈：卡片加
:active状态时，阴影可临时减弱（opacity: 0.8），但别改圆角——动画中改border-radius性能极差
最麻烦的其实是字体大小和行高在不同设备上的组合效果：稍一疏忽，姓名和职位就挤在一起，阴影再好看也没人细看。做一遍真机测试比调十次 CSS 更管用。
