直接给img加border-radius: 50%常失效，因它仅定义可视边界形状，不强制裁剪内容；需同时满足宽高相等、显式设置、配合object-fit: cover及overflow:hidden，否则图片会拉伸、留白或显示为椭圆。
为什么直接用 border-radius: 50% 会出问题
单独给 img 加 border-radius: 50% 看似能变圆，但图片原始宽高比不一致时，img 会被拉伸或留白——尤其在 iOS Safari 中，img 默认是 display: inline，底部还会多出几像素空白。这不是裁切，只是视觉遮罩，真正要的是「等比缩放后居中裁切」。
object-fit: cover 必须配 object-position 才靠谱
object-fit: cover 能保持宽高比缩放并填满容器，但默认对齐是 object-position: 50% 0（顶部居中），人像常被切掉额头或下巴。必须显式设置焦点位置：
-
object-position: 50% 50%：适合标准正面照 -
object-position: 50% 40%：更稳妥——多数人像构图头部偏上，上移焦点能保住眼睛和额头 - 避免用像素值（如
20px 10px），响应式下失效
外层容器三要素缺一不可
object-fit 只对替换元素（img、video）生效，且依赖父容器有明确尺寸。漏掉任意一条都会失效：
- 外层
<div> 必须设固定宽高（如 <code>width: 48px; height: 48px;），不能只靠img自撑 - 该
<div> 要加 <code>border-radius: 50%和overflow: hidden -
img必须设display: block消除行内基线间隙
高清屏下边缘发虚？别用 mask-image
用 mask-image: url("heart.png") 在部分 Android WebView 中会渲染成全黑或全透，因为 PNG 若非纯黑+alpha（比如带灰阶抗锯齿），且未按 window.devicePixelRatio 缩放遮罩图，就会出现 1px 半透明晕染。当前唯一稳定方案是 clip-path: circle(50%) 或直接用 border-radius: 50% + object-fit 组合——它不依赖图像资源，裁切区域、点击热区、动画响应全部同步更新。
立即学习“前端免费学习笔记（深入）”；
