直接写 border-radius: 50% 在头像场景下不够用，因宽高不等容器会失圆，且需适配多尺寸、多容器类型及裁剪逻辑；less 混合宏通过 .avatar-circle(@size) 封装正方形容器、border-radius: 50%、overflow: hidden 和 object-fit: cover，确保真圆效果并提升可维护性。
为什么直接写 border-radius: 50% 在头像场景下不够用
因为真实项目里头像往往需要适配不同尺寸（如 40px、64px、120px）、不同容器约束（如 img、div、svg）、甚至要配合 object-fit 或裁剪逻辑。硬写 50% 在宽高不等的容器中会失圆，而重复写三遍 border-radius: 50% 50% 50% 50% 又冗余且难维护。
用 Less 混合宏封装圆形头像：支持尺寸参数和安全 fallback
Less 的混合宏（mixin）能真正解决复用问题，关键是传入一个 @size 参数并自动推导半径值，同时兼容非正方形容器的兜底处理：
.avatar-circle(@size: 40px) {
width: @size;
height: @size;
border-radius: 50%;
// 防止图片拉伸变形
> img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
}
调用时只需：.avatar-circle(64px) 或 .avatar-circle(120px)。注意：这里没用 @size / 2 算半径，因为 50% 是相对自身宽高的百分比，只要容器是正方形，50% 就永远正确 —— 这是 CSS 原生行为，不是 Less 计算出来的。
遇到宽高不等的容器怎么办？别硬套 50%
如果父容器不是正方形（比如 width: 100px; height: 80px），直接 border-radius: 50% 会生成椭圆。此时应优先确保内容区域是正方形：
- 用
aspect-ratio: 1强制容器为正方形（现代浏览器支持） - 或用 padding-bottom 技巧（
padding-bottom: 100%+position: relative）构造正方形容器 - 避免在非正方形容器上强行加
border-radius: 50%—— 它不会“智能修正”，只会按宽高比例缩放圆角
要不要加 overflow: hidden？必须加
这是最容易被忽略的一环。没有 overflow: hidden，即使 border-radius 设了 50%，图片仍可能溢出圆角边界：
.avatar-circle(@size: 40px) {
width: @size;
height: @size;
border-radius: 50%;
overflow: hidden; // 关键！否则圆角无效
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
尤其当图片原始比例与容器不一致、或用了 transform 微调位置时，overflow: hidden 是保证视觉“真圆”的最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
