根本原因是box-sizing默认为content-box，加border后实际宽高变大但border-radius仍按原width/height计算，导致宽高不等而呈椭圆；必须设box-sizing:border-box使宽高包含border。
加 border 后头像变椭圆、撑出容器、或圆角失效，根本不是边框本身的问题，而是盒模型 + 宽高比 + 裁剪逻辑三者没对齐。
为什么 border-radius: 50% 加了边框就变歪？
因为 border-radius: 50% 是按当前元素的 width 和 height 各自的一半算的。一旦加了 border，而你又没改盒模型，默认 box-sizing: content-box，那实际渲染的宽高就变成了 width + border × 2，但圆角半径仍按原始 width 算——结果就是：本该是正方形的容器，被 border 拉成了宽高不等的矩形，50% 自然产出椭圆。
- 必须统一用
box-sizing: border-box，让width和height包含border和padding - 如果用了
aspect-ratio: 1，注意它只约束 content-box 区域，border仍会额外加厚——所以优先设box-sizing: border-box，再配aspect-ratio - 别在同一个元素上混用
width: 100%和固定border，响应式下容易因父容器尺寸浮动导致比例漂移
overflow-hidden 和 border-radius 不在同一层就白搭
很多人给头像外层 div 加 border-radius 和 overflow-hidden，但把 img 放进去后还是露直角。这是因为 overflow-hidden 只裁子元素的溢出内容，而 img 如果没填满盒子、或用了 object-fit: contain 留白，空白区域照样“溢出”并被裁掉，反而让图片缩进去了。
-
overflow-hidden必须和border-radius在同一元素上，且该元素要包裹图片（不能只包一层空 div） - 图片必须用
object-fit: cover填满，同时设width: 100%; height: 100%，否则裁剪无意义 - 如果只能改 CSS（比如 CMS 模板），用背景图方式更稳：
background-image+background-size: cover+border-radius: 50%，天然规避层级问题
响应式边框宽度变化时，圆角怎么不崩？
用 CSS 变量控制 border-width 很方便，但变量值变了，border-radius 不会自动跟着调——比如小屏设 --border: 1px，大屏设 --border: 3px，但 border-radius: 50% 还是按原始尺寸算，新边框可能盖住圆角边缘。
- 圆角值最好也用变量，例如
border-radius: calc(50% - var(--border, 2px))，确保减去边框厚度 - 更稳妥的做法是放弃百分比，直接用绝对值：
border-radius: 9999px（即 Tailwind 的rounded-full），它对边框宽度不敏感，只要宽高等于就行 - 别在
@keyframes里试图动画--border变量——浏览器不支持，得动画border-width本身
最容易被忽略的是：边框颜色透明（border-color: transparent）或宽度为 0 时，border-box 依然生效，但开发者工具里可能看不到边框，误以为没加成功；调试时务必看 computed styles 里的 border-top-width 和 box-sizing 实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
