直接给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）生效，且依赖父容器有明确尺寸。漏掉任意一条都会失效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 外层
  必须设固定宽高（如 width: 48px; height: 48px;），不能只靠 img 自撑
• 该
  要加 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 组合——它不依赖图像资源，裁切区域、点击热区、动画响应全部同步更新。