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 → 椭圆。
- 必须显式设置相等的
width和height（如都写64px），不能一个用auto、一个用固定值 -
img默认是inline元素，底部有基线间隙，实际高度略大于设定值 → 加display: block或vertical-align: top - 响应式场景可用
aspect-ratio: 1 / 1，但 Safari 15.4+ 才完全支持；老项目建议直接写等值width/height
overflow: hidden 和 object-fit: cover 为什么不能省？
border-radius 只负责“描边”，不裁内容。没 overflow: hidden，超出圆角的部分照常显示；没 object-fit: cover，非正方形原图会拉伸或留白。
-
overflow: hidden必须和border-radius写在同一元素上（通常是img自身），写在父容器里无效 -
object-fit: cover确保等比缩放并填满，但可能切掉人脸 → 配合object-position: center（默认居中）或object-position: center top微调 - 用 Tailwind 时，
rounded-full本质是border-radius: 9999px，对小尺寸更鲁棒，但依然要配overflow-hidden和object-cover
要不要用 clip-path: circle() 替代？
能实现同样效果，但兼容性和性能有差异：Firefox/Chrome/Safari（15.4+）支持良好，IE 完全不支持；动画中比 border-radius 更易掉帧。
- 语法是
clip-path: circle(50% at 50% 50%)，其中50%是半径，两个50%是圆心坐标 - 优势在于可动态改半径或位置（比如 hover 时扩大裁剪区），
border-radius不适合做这类过渡 - 若需兼容 iOS 12 或安卓 WebView 旧版，优先选
border-radius+ 容器背景图方案（div设background-image+background-size: cover）
最容易被忽略的是尺寸控制与内容适配的耦合：圆角只是最后一笔，前面宽高没锁死、图片没对齐、溢出没截断，圆就只是个错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
