要实现真正正圆头像，必须确保容器宽高相等且图片内容居中显示：1. 容器设为正方形（如width: 120px; height: 120px）；2. 图片加display: block或vertical-align消除基线间隙；3. 使用object-fit: cover与object-position: center（或background-size: cover与background-position: 50% 50%）精准控制裁切区域。

border-radius 怎么设才能真正变圆

不是所有 border-radius: 50% 都能出正圆头像——关键在宽高必须相等。如果容器是 width: 100px; height: 80px，哪怕写了 50%，浏览器也会按宽高分别算半径（50px 和 40px），结果是椭圆。

• 确保父容器或图片本身是正方形：比如固定 width: 120px; height: 120px
• 图片用 object-fit: cover 防止拉伸变形（尤其当原图不是正方形时）
• 别只给图片加 border-radius，要给包裹它的 或
  加，否则裁切无效

  为什么 img 直接加 border-radius 有时没效果

  常见现象：图片边缘还是直角，或者只有一两个角变圆。根本原因是图片被当作内联元素，默认有底部空白（来自基线对齐），导致实际渲染高度略大于设定值，border-radius 计算失准。

  • 给 加 display: block 消除行内间隙
  • 或者设 vertical-align: top/middle/bottom，避免基线干扰
  • 如果用背景图方式（background-image），记得同时设 background-size: cover 和 background-position: center

  兼容性与性能要注意什么

  border-radius 在现代浏览器里没问题，但老版本 Android WebView（4.3 及更早）对百分比支持不稳；另外，过度嵌套带圆角的元素可能触发移动端重绘变慢。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • IE9+、Chrome 4+、Firefox 4+ 均支持 border-radius: 50%，无需前缀
  • 真要兼容极旧环境，可用 border-radius: 999px 替代（前提是容器足够小）
  • 避免给大量头像同时加 box-shadow + border-radius，iOS Safari 容易掉帧

  常见错误：裁出来是圆，但人像偏了

  这是最常被忽略的一点：圆角只是“裁”，不负责“居中”。如果图片原始尺寸远大于容器，又没控制缩放和定位，人脸大概率被切掉一半。

  • 用 object-fit: cover（推荐）或 object-fit: contain 显式声明缩放行为
  • 配合 object-position: center 确保焦点在中央（默认就是 center，但显式写上更稳妥）
  • 如果用背景图，background-position: 50% 50% 比 center center 更易排查解析问题

  实际做圆形头像，难点不在“怎么圆”，而在“怎么让该露的脸露出来”。很多效果崩掉，都是因为忘了控制尺寸比例和内容定位这两步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！