border-radius: 50% 只有在 width 和 height 完全相等时才呈现正圆，需显式设置等宽高、用 object-fit 控制图片适配、避免 box-shadow 与圆角共用，并通过 transform 硬件加速解决动画闪方问题。
border-radius: 50% 不生效？检查宽高是否相等
圆形裁剪本质是让元素在等宽高等比例下四角圆角拉满，border-radius: 50% 只有在 width 和 height 完全一致时才真正出圆。常见错误是图片容器设了 width: 100px 却漏写 height，或用了 max-width 导致高度塌缩。
- 必须显式设置相等的
width和height（如都为80px），不能只靠图片自身尺寸撑开 - 若用
img标签，记得加display: block防止底部留白（inline 元素默认基线对齐） - 响应式场景下，用
aspect-ratio: 1 / 1替代固定宽高更稳妥（但注意 Safari 15.4+ 才完全支持）
图片被裁掉一部分？用 object-fit 控制内容缩放
即使容器是正圆，图片本身宽高比不匹配时仍会溢出或留白。object-fit 决定图片如何适应容器，不是靠 border-radius 能解决的。
-
object-fit: cover：等比缩放并裁剪，常用，但可能切掉脸 -
object-fit: contain：等比缩放并完整显示，四周可能有空白 - 别忘了配
object-position微调裁剪区域，比如object-position: center top把头露出来
IE 或老版本 Safari 圆角模糊？避免 box-shadow + border-radius 套叠
某些旧引擎在同时使用 border-radius 和 box-shadow 时渲染异常，边缘发虚或出现锯齿，尤其配合 transform 或 filter 时更明显。
- 优先用
outline代替border加边框（outline不影响布局，且老浏览器兼容性更好） - 阴影改用伪元素
::after实现，绕过原生渲染路径 - 真要兼容 IE11，得用
clip-path: circle(50% at 50% 50%)，但注意它不支持百分比半径在 IE 中失效
头像动起来时变方？重绘触发问题
给圆形头像加 transition 或 animation（比如 hover 放大）时，部分浏览器会在动画中间帧临时关闭圆角渲染，导致“闪方”。
- 强制开启硬件加速：
transform: translateZ(0)或will-change: transform - 避免对
border-radius本身做过渡——改用transform: scale()缩放整个容器更稳定 - 如果用了
clip-path，动画中它的性能远低于border-radius，老设备上容易掉帧
最常被忽略的是容器尺寸控制和图片内容适配的配合；border-radius: 50% 只是最后一道“描边”，前面宽高、缩放、定位没对齐，圆就只是个幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
