如何用CSS实现头像圆形裁剪？

border-radius: 50% 显示椭圆的根本原因是元素宽高不相等，因其水平半径按宽度50%计算、垂直半径按高度50%计算；必须显式设置相等的width和height，并配合display: block、overflow: hidden与object-fit: cover才能实现真正正圆。

只加 border-radius: 50% 肯定出不了真圆——它只是“画弧”，不控制尺寸、不裁内容、不缩放图片，三者缺一不可。

为什么 border-radius: 50% 加了还是椭圆？

浏览器按当前元素的 width 和 height 分别算半径：50% 就是「宽度的一半」和「高度的一半」。如果宽高不等（比如 width: 100px; height: 80px），结果就是横向 50px、纵向 40px → 椭圆。

1. 必须显式设置相等的 width 和 height（如都写 64px），不能一个用 auto、一个用固定值
2. img 默认是 inline 元素，底部有基线间隙，实际高度略大于设定值 → 加 display: block 或 vertical-align: top
3. 响应式场景可用 aspect-ratio: 1 / 1，但 Safari 15.4+ 才完全支持；老项目建议直接写等值 width/height

overflow: hidden 和 object-fit: cover 为什么不能省？

border-radius 只负责“描边”，不裁内容。没 overflow: hidden，超出圆角的部分照常显示；没 object-fit: cover，非正方形原图会拉伸或留白。

1. overflow: hidden 必须和 border-radius 写在同一元素上（通常是 img 自身），写在父容器里无效
2. object-fit: cover 确保等比缩放并填满，但可能切掉人脸 → 配合 object-position: center（默认居中）或 object-position: center top 微调
3. 用 Tailwind 时，rounded-full 本质是 border-radius: 9999px，对小尺寸更鲁棒，但依然要配 overflow-hidden 和 object-cover

要不要用 clip-path: circle() 替代？

能实现同样效果，但兼容性和性能有差异：Firefox/Chrome/Safari（15.4+）支持良好，IE 完全不支持；动画中比 border-radius 更易掉帧。

1. 语法是 clip-path: circle(50% at 50% 50%)，其中 50% 是半径，两个 50% 是圆心坐标
2. 优势在于可动态改半径或位置（比如 hover 时扩大裁剪区），border-radius 不适合做这类过渡
3. 若需兼容 iOS 12 或安卓 WebView 旧版，优先选 border-radius + 容器背景图方案（div 设 background-image + background-size: cover）

最容易被忽略的是尺寸控制与内容适配的耦合：圆角只是最后一笔，前面宽高没锁死、图片没对齐、溢出没截断，圆就只是个错觉。