CSS布局实战之个人名片卡片_图文混排与阴影层次应用

图文混排不塌陷需用flex布局并清除浮动，头像设flex-shrink:0，文字区域加overflow:hidden；阴影分层靠外阴影+内阴影错开参数；响应式用clamp()和min()控制尺寸；圆角发虚改用clip-path解决。

怎么让图文混排不塌陷、不重叠

图文混排出问题，八成是浮动没清或 display 没对齐。常见现象是头像飘到文字外边、文字被截断、卡片高度塌成一条线。

用 display: flex 是最稳的解法，别碰 Float ——它在现代布局里只负责埋雷。

• flex 容器设 align-items: center，头像和文字自动垂直居中，不用算 margin-top
• 头像用 flex-shrink: 0，防止小屏幕下被压缩变形
• 文字区域加 overflow: hidden，避免长名字撑破卡片

.card {   display: flex;   align-items: center;   gap: 12px; } .avatar { flex-shrink: 0; } .info { overflow: hidden; }

css阴影怎么分层才不糊成一块

多个 box-shadow 叠一起，不是数值越大越立体，而是得有「远近感」：内阴影模拟凹陷，外阴影模拟浮起，模糊半径和偏移量要错开。

直接写 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 看着干净，但层次感为零；加一层内阴影才能显厚度。

立即学习“前端免费学习笔记（深入）”；

• 外阴影用 0 2px 6px（近） + 0 6px 20px（远），模拟不同距离的光散射
• 内阴影加 inset 0 1px 2px rgba(255,255,255,0.5)，提亮上边缘，强化「凸起」错觉
• 别用 blur 超过 30px，移动端会糊，ios safari 渲染更慢

响应式下图文比例怎么不崩

头像从 80px 缩到 48px，文字字号却还卡在 16px，视觉就失衡。关键不是「等比缩放」，而是按阅读动线重新分配空间。

用 clamp() 控制字号比媒体查询更轻量，但要注意 Safari 14.1+ 才完全支持，老版本得降级。

• 头像尺寸用 min(80px, 12vw)，既保最小可点区域，又防大屏溢出
• 文字行高固定为 1.4，别用 em 或 rem 套嵌，否则缩放时行距乱跳
• 小屏下把 flex-direction: column，头像置顶，文字左对齐——人眼扫视顺序比左右并列更自然

阴影和圆角组合为什么边缘发虚

这不是 bug，是抗锯齿策略冲突：border-radius 切圆角，box-shadow 按矩形渲染，两者叠加时 GPU 插值出问题，尤其在 Retina 屏和 chrome 115+。

最简解法是统一用 clip-path 包裹整个卡片，阴影照常加，圆角由裁切控制。

• 用 clip-path: inset(0 round 12px) 替代 border-radius，阴影不再「漏边」
• 如果必须兼容 IE，就放弃多层阴影，只留一层 0 2px 8px + border-radius，接受轻微发虚
• 别给 transform: scale(0.99) 这类 hack，会触发额外合成层，卡顿比发虚更难调

圆角和阴影的物理感，靠的是参数差值，不是堆叠数量；调的时候盯着真机看，模拟器永远骗你。