能，但仅当元素是正方形时才可靠；若宽高不等则生成椭圆，需确保容器宽高相等、用object-fit:cover裁剪、display:block消除间隙、overflow:hidden强制裁剪，并注意iOS旧版本兼容性。
border-radius: 50% 能不能直接裁出圆形头像？
能，但仅当元素是正方形时才可靠。如果 width 和 height 不等，border-radius: 50% 会生成椭圆，不是真圆——这是最常被忽略的前提。
实操建议：
- 确保头像容器（如
<img alt="CSS如何实现圆形头像裁剪_利用border-radius圆角属性" >或外层<div>）的宽高严格相等，例如统一设为 <code>100px - 避免用百分比宽高（如
width: 50%）配合height: auto，这会导致尺寸失衡 - 若图片原始比例非 1:1，建议先用
object-fit: cover配合固定容器尺寸裁剪内容，再加圆角 - 给
<img alt="CSS如何实现圆形头像裁剪_利用border-radius圆角属性" >设置display: block，消除默认行内元素的基线间隙 - 容器加
overflow: hidden（尤其当用外层<div> 包裹时），强制裁剪超出部分 <li>避免在 <code>img上同时使用transform: scale()或动画，可能触发渲染异常 - 如需高清显示，确保图片分辨率 ≥ 容器尺寸 × 2（即支持 @2x），否则缩放后边缘易模糊
- 用
<div class="avatar"></div>作为容器，设置width/height相等 +border-radius: 50%+overflow: hidden - 将图片设为该容器的
background-image，并用background-size: cover和background-position: center控制显示区域 - 这样绕过 img 元素自身的渲染限制，兼容性可下探至 iOS 8
img 标签直接加 border-radius: 50% 为什么边缘有白边或锯齿？
常见于图片未完全填满容器，或浏览器对 sub-pixel 渲染处理不一致。本质是视觉溢出或抗锯齿失效，不是代码写错。
解决办法：
立即学习“前端免费学习笔记（深入）”；
如何兼容老版本 iOS Safari（如 iOS 9）的 border-radius 裁剪问题？
iOS 9 及更早版本对 border-radius 在 <img alt="CSS如何实现圆形头像裁剪_利用border-radius圆角属性" > 上的裁剪支持不稳定，尤其配合 object-fit 时可能完全失效。
稳妥方案是降级为容器裁剪：
`.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background-image: url("photo.jpg");
background-size: cover;
background-position: center;
}`
用 clip-path 实现圆形头像是否更好？
理论上更精确，但实际落地要权衡：目前 clip-path: circle() 在 Safari 中仍需 -webkit-clip-path 前缀，且部分安卓 WebView 对 circle(50% at 50% 50%) 解析不一致；而 border-radius: 50% 的兼容性已覆盖所有现代浏览器，包括 Android 4.4+ 和 iOS 8+。
除非你明确需要非中心圆、动态半径或与 SVG 路径联动，否则没必要换 clip-path——多一个前缀、少一行代码的事，不值得为“更语义”增加维护成本。
真正容易被忽略的是：无论用哪种方式，都必须控制好图片加载前的占位状态。比如服务端返回头像失败时，<img alt="CSS如何实现圆形头像裁剪_利用border-radius圆角属性" > 会塌陷，导致圆角失效；此时应预留 min-width/min-height 或用伪元素兜底。
