最简方案是设置等宽高+固定圆角值+object-fit: cover，如style="width:80px;height:80px;border-radius:12px;object-fit:cover;"。
用 border-radius 实现头像方形圆角最简方案
直接给图片加 border-radius: 50% 就能变圆形，但你要的是「方形圆角」——也就是保留正方形比例、只切四个角。关键不是圆不圆，而是宽高一致 + 圆角值合理。
常见错误是只写 border-radius: 10px 却没控制图片尺寸，结果在不同容器里被拉伸变形，圆角看起来歪斜或失效。
- 必须显式设置
width和height相等（比如都设为80px），否则浏览器按原图宽高渲染，不是正方形 -
border-radius值建议用固定像素（如12px）或相对单位（如8%），避免用50%（那会变圆） - 如果头像来自用户上传，原始图可能不是正方形，得用
object-fit: cover裁剪居中显示
@@##@@
用 CSS 类复用样式，避免内联写死
内联 style 写法适合快速验证，但实际项目里得抽成类。注意命名别用 avatar-round 这种歧义词——你明确要的是「带圆角的方形」，类名就该体现意图。
- 推荐类名如
avatar--square-rounded或img-avatar-soft，语义清晰，不怕后续加圆形头像时混淆 - 如果项目已用 Tailwind，直接用
rounded-lg w-20 h-20 object-cover（rounded-lg默认是0.5rem≈8px） - 不要只靠
border-radius，记得加vertical-align: middle防止图片和文字基线错位
响应式场景下圆角容易“消失”的原因
在手机上头像变小后，border-radius: 12px 可能比元素本身还大，导致视觉上像没圆角，甚至出现锯齿。这不是 bug，是像素对齐问题。
- 小尺寸（≤40px）时改用百分比：比如
border-radius: 10%，这样缩放时圆角比例稳定 - 真要保锐利边缘，可加
image-rendering: -webkit-optimize-contrast（仅 Safari/Chrome 有效） - 如果用了
transform: scale(0.8)等缩放，圆角会按缩放前尺寸计算，务必避免
头像背景色与圆角交界处发虚？检查是否漏了 overflow: hidden
当头像外层包了 <div> 并设置了背景色或边框，而图片本身没填满容器，圆角交界处常出现半透明毛边。这是因为图片边缘抗锯齿和父容器背景叠加造成的视觉误差。
<ul>
<li>最稳解法：给父容器加 <code>overflow: hidden，强制裁剪溢出像素
background-color 填满父容器，再让图片 object-fit: cover 居中覆盖box-shadow 模拟圆角，阴影不随缩放变化，高清屏下会模糊复杂点在于：圆角值、图片源尺寸、容器约束、设备像素比四者耦合。调一个参数常牵动三个表现，所以建议先定死容器尺寸，再反推圆角值，而不是反过来猜。
