border-radius: 50% 不圆的根本原因是宽高不等或盒模型异常；需确保正方形尺寸、正确 display 和 overflow: hidden，配合 object-fit: cover 及 aspect-ratio 保障响应式圆形。
border-radius: 50% 不圆？先看宽高是否相等
圆形头像的前提是元素本身得是正方形，border-radius: 50% 只是把四个角按「宽高一半」的半径去切，如果 width 和 height 不一致，结果就是椭圆。
- 确保容器有明确且相等的
width和height（比如都设为100px） - 图片本身宽高比不匹配时，用
object-fit: cover配合居中裁剪，避免拉伸变形 - 别依赖父容器 padding 或 margin 挤压出“视觉正方形”，那只是错觉，
border-radius仍按盒模型真实尺寸计算
img 标签直接加 border-radius 有时失效？检查 display 和 overflow
默认 img 是 inline 元素，行内元素的 border-radius 在某些浏览器（尤其旧版 Safari）下可能不生效，或者被换行符、空格干扰。
- 给
img加display: block或display: inline-block - 如果父容器有
overflow: hidden，确保它没被意外移除（比如被重置 CSS 覆盖） - 避免用
vertical-align拉动基线导致底部留白——那块白不是边框，但会让人误以为“没裁掉”
响应式圆形头像：用 aspect-ratio 还是 padding-top hack？
要让头像在不同屏幕下始终是圆的，又不想写死像素值，关键在于维持宽高比。现代方案优先用 aspect-ratio，兼容性不够时再降级。
- 支持
aspect-ratio的浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）：直接写aspect-ratio: 1 / 1，配合width: 100%即可 - 老浏览器需 fallback：用伪元素或
padding-top: 100%+position: absolute布局，但更重、更易出错 - 别用
vw单位配border-radius: 50%而不约束高宽——视口变化时容易失圆
阴影和边框叠加后边缘发虚？注意渲染顺序和抗锯齿
box-shadow 或 border 和 border-radius 一起用时，边缘可能出现模糊、锯齿或颜色溢出，本质是亚像素渲染和图层合成问题。
立即学习“前端免费学习笔记（深入）”；
- 避免
border宽度为小数（如1.5px），优先用整数（1px、2px） -
box-shadow的blur值越大，越容易软化边缘；若需锐利轮廓，把blur设为0，用spread扩展阴影范围 - 部分安卓 WebView 对
border-radius+transform（如缩放）组合渲染异常，测试时务必真机查看
border-radius: 50%，而是没意识到它只负责“切角”，不负责“塑形”——宽高不等、display 类型不对、父容器 overflow 缺失，任何一个都会让圆变味。 
