border-radius: 50% 不总是正圆，因其百分比基于宽高分别计算；宽高不等时呈椭圆，需宽高相等或用 aspect-ratio: 1 配合 border-radius: 50% 实现正圆。
border-radius: 50% 为什么有时不是正圆？
因为 border-radius 的百分比值是相对于盒模型的宽高分别计算的——宽算一次，高算一次。如果元素宽高不等（比如 width: 100px; height: 80px），border-radius: 50% 就会得到椭圆，不是头像要的正圆。
- 必须保证容器是正方形：
width和height相等，或用aspect-ratio: 1 - 图片本身拉伸也会破坏圆形效果，建议用
object-fit: cover裁切而非拉伸 - 父容器有 padding 或 border 会影响实际尺寸，用
box-sizing: border-box避免意外
移动端适配时图片变形怎么办？
直接写死 width: 60px; height: 60px 在小屏上太占地方，大屏又显得小。用相对单位 + aspect-ratio 是更稳的解法。
- 推荐写法：
width: 15vw; aspect-ratio: 1; border-radius: 50%—— 宽度随视口变，高自动匹配 - 老安卓（
Chrome 、Safari ）不支持aspect-ratio，得 fallback：用伪元素或 padding-bottom 技巧撑高 - 别依赖图片原始尺寸，
img标签一定要设display: block，否则底部可能留白缝隙
用 background-image 做头像时 border-radius 失效？
不是失效，是背景图默认不裁剪出界部分。即使容器圆了，背景图还是按原样平铺/拉伸，视觉上像“溢出”了。
- 加
background-clip: content-box或background-clip: padding-box确保只在圆角区域内显示 - 更常用的是
background-size: cover+background-position: center，避免关键区域被切掉 - 如果用
background-image，就别再套img标签，否则语义和可访问性都受损
iOS Safari 下圆角锯齿明显怎么缓解？
iOS 渲染引擎对 subpixel 边缘处理较弱，尤其在非整数缩放或 transform 场景下，border-radius 边缘容易发虚或锯齿。
- 加
-webkit-backface-visibility: hidden或transform: translateZ(0)触发硬件加速 - 避免用小尺寸（如
24px以下）做圆形头像，32px是较稳妥的下限 - 不用
box-shadow模拟边框，改用outline或透明border，减少渲染负担
事情说清了就结束。真正难的不是写那行 border-radius: 50%，而是它依赖的整个盒模型上下文是否可控——宽高、图片加载时机、设备像素比、甚至 Safari 的私有渲染行为，漏掉一个，圆就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
