加了border后圆形头像变椭圆或发虚，是因为box-sizing:content-box使border额外撑开尺寸；应设相等宽高、border-radius:50%、box-sizing:border-box，并用object-fit:cover和object-position:center控制图片。
加了 border 后圆形头像变椭圆或边缘发虚？不是 border 本身“破坏”了圆，而是默认的 box-sizing: content-box 让 border 额外撑开了总尺寸，导致宽高不一致或裁剪异常。
确保宽高相等 + border-radius: 50%
圆形的前提是元素本身是正方形。如果容器宽高不同，哪怕设了 50%，也会变成椭圆。
- 给头像图片或容器明确设置相等的
width和height（如100px） - 再加
border-radius: 50%—— 此时才是真圆 - 避免用
%值依赖父容器（除非父容器也是正方形）
用 box-sizing: border-box 包住 border
默认 content-box 下，width: 100px + border: 2px = 实际占用 104px 宽度，可能打破布局或挤压圆角渲染精度。
- 加上
box-sizing: border-box，让 border 包含在设定的宽高内 - 这样即使加了
border: 3px solid #ccc，整体仍是严格 100×100 的正方形，圆角不会失真 - 建议全局重置：
* { box-sizing: border-box; }
图片本身要居中且无拉伸
border 不影响 shape，但图片若被拉伸、偏移或有空白，会让人误以为“圆变形”。
立即学习“前端免费学习笔记（深入）”；
- 用
object-fit: cover确保图片填满且保持比例 - 用
object-position: center防止人脸偏移 - 避免只设
width: 100%而不设height，否则图片高度由内容决定，易失衡
基本上就这些。border-radius 50% 是画圆的钥匙，但得配齐“正方形容器 + border-box + 图片可控”三件套，圆才稳。
