要画出真圆，必须确保元素宽高相等；border-radius: 50% 表示各方向圆角半径为该方向长度的一半，宽高不等则成椭圆。可靠方法有三：显式设等宽高、用 aspect-ratio: 1、伪元素+padding-bottom 技巧；clip-path 仅裁剪视觉区域，不改变布局语义，慎用。
直接用 border-radius 设为 50% 就能画出真圆，但前提是元素宽高必须相等——这是绝大多数人一开始没意识到就失败的关键。
为什么 border-radius: 50% 有时画出来是椭圆？
因为 border-radius: 50% 的含义是「把每个角的圆角半径设为该方向（水平或垂直）长度的一半」。如果 width 和 height 不等，水平和垂直方向的半径就不等，结果就是椭圆。
常见错误场景：
- 只写
width: 100px;没设height，靠内容撑开高度 → 高度不等于宽度 - 用
padding或line-height伪装成正方形 → 实际height仍不可控 - 响应式中用
%或vw设宽高，但未同步约束比例
三种可靠实现正圆的方法（按推荐顺序）
核心原则：确保渲染时 width === height，且不依赖内容尺寸。
立即学习“前端免费学习笔记（深入）”；
-
方法一（最常用）：显式设置等宽高等值
适用于固定尺寸场景，语义清晰、兼容性好（IE9+）
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: #3498db;
}-
方法二（响应式友好）：用
aspect-ratio: 1
现代方案（Chrome 88+、Firefox 89+、Safari 15.4+），宽高自动保持 1:1，只需设一个方向尺寸
.circle-responsive {
width: 20vw;
aspect-ratio: 1;
border-radius: 50%;
background: #e74c3c;
}.circle-legacy {
width: 100%;
position: relative;
}
.circle-legacy::before {
content: '';
display: block;
padding-bottom: 100%; /* 高度 = 宽度 */
}
.circle-legacy > div {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background: #2ecc71;
}用 clip-path 画圆？谨慎选择
clip-path: circle() 确实能画圆，但它只是「裁剪可见区域」，元素本身仍是矩形——这意味着事件响应、布局占位、无障碍属性都按原矩形计算，容易引发意料外行为。
- 点击区域仍是整个矩形，不是视觉上的圆
- 与相邻元素的 margin/padding 行为不符合直觉
- 部分屏幕阅读器可能忽略
clip-path导致语义丢失 - 性能上比
border-radius略差（尤其动画中）
除非你明确需要「非对称裁剪」或「动态半径变化」，否则没必要绕路用 clip-path。
圆角失效的几个隐藏坑
即使宽高相等，border-radius: 50% 也可能不圆：
- 父容器设置了
overflow: hidden，但子元素有负margin或transform偏移 → 圆角被意外裁切 - 元素有
box-shadow且spread-radius过大 → 阴影边缘看起来“不圆”，其实是阴影溢出 - 使用了
transform: scale()但未重置transform-origin→ 缩放后圆心偏移，视觉上像变形 - 在 Flex/Grid 容器中，子项被设为
flex: 1且无明确宽高 → 浏览器可能按最小内容宽高渲染，导致不等
调试时优先检查 computed styles 中的 width 和 height 是否真的一致，而不是只看 CSS 规则。
