直接设置 border-radius: 50% 可实现圆形裁剪，但需确保图片宽高相等且无父容器溢出隐藏、图片拉伸或基线对齐等干扰；推荐用 width/height 固定值或 aspect-ratio: 1/1 配合 object-fit: cover 和 vertical-align: middle。
直接给图片元素设置 border-radius: 50% 即可实现圆形裁剪，但需确保图片宽高相等且容器不干扰显示。
确保图片是正方形尺寸
圆形裁剪的前提是元素宽高一致，否则会变成椭圆。推荐做法：
- 给
<img>设置固定且相等的width和height（如100px） - 或使用
aspect-ratio: 1 / 1配合width: 100%实现响应式正方形 - 避免只设宽度、高度由内容撑开——原始图片长宽比不一会导致变形
应用 border-radius: 50%
这是核心步骤，50% 表示将直角弧度设为宽高一半，自然形成正圆：
-
border-radius: 50%;是最简洁写法，等价于border-radius: 50% / 50%; - 无需加边框（
border），即使没有边框也能裁剪显示区域 - 注意：该属性作用于元素的「渲染边界」，对图片内容本身无修改，只是视觉裁剪
处理常见干扰因素
有时看似设置了 50% 却没变圆，往往是以下原因：
立即学习“前端免费学习笔记（深入）”；
-
父容器溢出隐藏未关闭：若父级有
overflow: hidden且尺寸不足，可能截断圆形边缘——检查并确保父容器足够大或移除限制 -
图片被拉伸变形：用
object-fit: cover;替代默认拉伸，让图片居中裁剪填充正方形区域 -
行内元素默认对齐问题：
<img>默认是基线对齐，下方可能留白——加vertical-align: middle;消除间隙
不复杂但容易忽略细节。关键就三点：正方形尺寸、border-radius: 50%、清除干扰样式。
