怎么通过 CSS 的 border-radius 属性将方形头像图片裁剪为圆形显示

先说几个核心判断：用 CSS 把方形头像裁成圆形，这事儿本身不复杂，核心就靠一个属性——border-radius: 50%。但很多人在实际操作中会发现，明明设置了，效果却不尽如人意。其实问题通常出在三个细节上：图片是不是正方形、容器有没有“捣乱”、图片本身有没有被拉伸。这些点理顺了，一步到位。

直接上结论：给 加上 border-radius: 50%，前提是图片宽高相等，且没有父容器溢出隐藏、图片拉伸或基线对齐等干扰。配合 width/height 固定值或 aspect-ratio: 1/1，再加 object-fit: cover 和 vertical-align: middle，基本就能搞定。

确保图片是正方形尺寸

圆形裁剪有个硬性条件——元素宽高必须相等，否则出来的是椭圆。怎么保证？

• 给 同时设置固定的 width 和 height，比如 100px 乘 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; 替代默认拉伸，让图片居中裁剪填充正方形区域。
• 行内元素默认对齐问题： 默认是基线对齐，下方可能留白。加一个 vertical-align: middle; 就能消除间隙。

说到底，圆角裁剪本身不复杂，但容易在细节上翻车。记住三个关键点：正方形尺寸、border-radius: 50%、清除干扰样式，基本就能一步到位。