必须配合宽高等比才能用border-radius: 50%裁出正圆，因该属性按宽高分别计算半径，宽高不等则成椭圆；实操需设相等width/height、object-fit: cover防拉伸、overflow: hidden强制裁剪。
用 border-radius: 50% 裁出圆形，但必须配合宽高等比
直接写 border-radius: 50% 不一定出圆——它只在元素是正方形时才生效。如果图片本身宽高不等，或容器设置了 width 和 height 不一致，就会变成椭圆。
实操要点：
- 确保头像容器的
width和height值相等（比如都设为80px） - 图片用
object-fit: cover防止拉伸变形，同时填满整个圆形区域 - 避免用
img的width/height属性硬缩放，会破坏比例；优先用 CSS 控制尺寸
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
为什么需要 overflow: hidden？
border-radius: 50% 只是给容器加圆角，不裁剪内容。如果图片超出容器边界（比如原图是横幅，object-fit: cover 会居中截取），没加 overflow: hidden 就会漏出直角边缘。
常见错误现象：
- 头像边缘出现尖角或像素溢出
- 在 Safari 或旧版 Chrome 中圆形不完整
- 使用
transform: scale()后裁切失效（此时更需overflow: hidden）
用 clip-path 替代方案？兼容性要注意
clip-path: circle(50% at 50% 50%) 确实也能裁圆，但它和 border-radius 行为不同：它只裁图像，不改变容器的渲染边界，可能影响点击区域、阴影、过渡动画等。
适用场景：
- 需要保留原始容器形状做布局（比如头像嵌在非圆形卡片里）
- 要做非居中圆形裁切（如
circle(40px at 30px 30px)） - 但注意：IE 完全不支持，Android 4.4 及更早 WebView 也不支持
响应式头像下容易忽略的坑
当用 rem、% 或 vw 设置头像尺寸时，宽高必须保持 1:1 比例，否则一缩放就变椭圆。
安全做法：
- 用
aspect-ratio: 1 / 1（Chrome 88+、Firefox 89+ 支持） - 或用
padding-bottom: 100%+ 绝对定位的经典 hack（兼容性更好） - 避免在媒体查询里只改
width不同步改height
复杂点在于：很多 UI 库（如 Ant Design、Element Plus）的 avatar 组件默认不设 overflow: hidden，或者用 background-image 实现，这时得手动覆盖样式，而不是只调 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
