border-radius: 50% 不是圆，因它按宽度和高度分别取50%计算半径，宽高不等时必成椭圆；需同时满足宽高等值和overflow: hidden才能实现正圆。
border-radius: 50% 为什么不是圆？
因为 border-radius: 50% 是分别按宽、高各自取 50%，宽 120px → 水平半径 60px，高 80px → 垂直半径 40px，结果必然是椭圆。它不判断“你想要圆”，只做数学计算。
必须同时满足两个条件：容器宽高等值 + overflow: hidden。前者保证几何基础，后者确保图片不撑出边界——border-radius 本身不裁图，只画边框轮廓。
- 别用
width: 50%; height: auto，父容器高度不确定时，height会塌陷为 0 - 推荐用
aspect-ratio: 1（Chrome ≥ 80 / Safari ≥ 15.4 支持），配合width: 15vw实现视口自适应 - 老安卓 WebView 或 iOS width: 30%; padding-top: 30%; position: relative;，再用绝对定位把图片塞满
- 避免用
rem配根字体缩放——用户系统字号改动会导致头像尺寸意外跳变
img 标签直接设 border-radius 的坑
直接给 <img> 加 border-radius: 50% 看似最简，但风险集中：
- 若原始图非正方形，
width和height强制等值会拉伸变形；object-fit: cover可缓解，但裁剪位置不可控（默认居中，可能切掉关键脸部） -
img是 inline 元素，默认有底部间隙（来自基线对齐），需加display: block或vertical-align: top - 无法统一控制头像容器的
overflow行为——比如徽标要贴右上角，但img自身没position: relative上下文，徽标会飘到body - 响应式缩放时，
border-radius像素值固定（如32px）在小屏上会显得过大，建议全用百分比或vw
徽标（Badge）总飘到页面右上角？
90% 是因为徽标父容器漏了 position: relative。只要没这行，position: absolute 的徽标就会逐级往上找定位上下文，最终钉在 body 右上角。
必须加在徽标的**直接父元素**上，例如：
- 头像用
<div class="avatar"><img></div>包裹，就给.avatar加position: relative - 不能加在
<img>自身上——它是 inline 元素，高度不可靠，top: 0会错位 - 精确定位用
top: 0; right: 0; transform: translate(50%, -50%)，不是top: -6px; right: -6px——后者在不同字号/缩放下极易出界 - 务必加
pointer-events: none，否则徽标会拦截背后头像的点击；内部如有清空按钮，再单独给按钮加pointer-events: auto - 检查父级是否设了
overflow: hidden（常见于卡片列表、flex 容器），它会把徽标裁掉
移动端适配中最容易被忽略的一点
不是 border-radius 写法，也不是徽标定位逻辑，而是 viewport 元标签里漏了 user-scalable=no 或 maximum-scale=1 的副作用：当用户双指缩放页面时，vw 单位和 transform 坐标都会失准，导致圆形变椭、徽标偏移。实际项目中，应优先保交互可缩放，再用 aspect-ratio + clamp() 组合替代纯 vw，比如 width: clamp(32px, 15vw, 64px) —— 这才是真正在各种缩放、横竖屏、系统字号下都稳的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
