纯css实现圆形头像仅限视觉裁剪，需同时满足：显式等宽高、overflow: hidden、img设display: block；非正方形图用object-fit: cover配合background-image方案更稳妥。
纯 CSS 能实现圆形头像裁剪，但仅限于“视觉裁剪”——即显示为圆，不修改原始图片数据；若需上传/导出真圆形图片，必须用 canvas 或服务端处理。
border-radius: 50% 为什么有时还是方的？
它只定义角的弧度，不自动裁内容。真正生效要同时满足三个硬性条件：
- 作用元素（
img或其父容器）必须有**显式且相等的width和height**，比如width: 80px; height: 80px;；用width: 100%; height: auto;必然失败 - 必须搭配
overflow: hidden（加在同一元素上），否则超出部分照常显示 - 若用
img标签，务必加display: block消除行内默认基线间隙，否则底部可能露白边
非正方形原图怎么填满圆形容器？
靠 object-fit 控制缩放与裁剪逻辑，不是靠 border-radius 解决的：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
object-fit: cover：等比缩放并居中裁剪，最常用；但可能切掉额头或下巴，此时配合object-position: center top微调 -
object-fit: contain：等比缩放并完整显示，四周留白；不适合头像场景 - 不用
object-fit时，图片会拉伸变形，border-radius再圆也没用
移动端和老 iOS 的兼容雷区
某些安卓 WebView 和 iOS 9–12 对 img 直接设 border-radius + overflow: hidden 渲染不稳定，推荐降级方案：
- 改用
div容器包裹：div设width/height相等、border-radius: 50%、overflow: hidden - 把图片设为该
div的background-image，配background-size: cover和background-position: center - 需要动画（如 hover 放大）时，加
transform: translateZ(0)强制硬件加速，避免中间帧“闪方”
clip-path: circle() 值不值得换？
它能更精确控制圆心和半径（比如 clip-path: circle(40px at 40px 40px)），但落地成本高：
- Safari 需
-webkit-clip-path前缀；Android 4.4 及更早版本完全不支持 -
circle(50% at 50% 50%)在部分微信 WebView 中解析偏移，圆心不准 - 动画性能比
border-radius差，低端机易掉帧 - IE11 不支持，且
circle()的百分比半径在 IE 中直接失效
除非你要做非居中圆形或动态调整圆心，否则没必要绕开已验证稳定的 border-radius + 容器方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
