border-radius: 50% 得到椭圆而非正圆是因为按宽高分别取50%，宽高不等时即为椭圆；需确保元素为正方形或用aspect-ratio: 1才能得到正圆。
border-radius: 50% 为什么有时是椭圆，不是正圆
因为 border-radius: 50% 是按盒模型的宽高分别计算的：水平方向用宽度的 50%，垂直方向用高度的 50%。如果元素宽高不等，结果就是椭圆。
- 常见错误现象：
div设了width: 200px; height: 100px; border-radius: 50%，出来的是横向拉伸的椭圆，不是圆 - 使用场景：想做头像、图标容器、加载指示器等需要真圆的地方
- 正确做法：确保元素是正方形——
width和height必须相等，或用aspect-ratio: 1约束 - 兼容性注意：
aspect-ratio在 safari 15.4+ 和 chrome 88+ 支持良好，老版本需 fallback 为固定宽高或 padding-bottom 技巧
用 border-radius 实现圆角矩形时，四个角数值怎么填才不晕
border-radius 的值顺序和简写规则容易记混，本质是「顺时针从左上开始」，但可以少写，浏览器会自动镜像补全。
- 一个值：
border-radius: 8px→ 四个角都是8px - 两个值：
border-radius: 8px 12px→ 左上/右下 =8px，右上/左下 =12px - 三个值：
border-radius: 8px 12px 4px→ 左上 =8px，右上/左下 =12px，右下 =4px（左上对角不镜像） - 四个值：
border-radius: 8px 12px 4px 6px→ 顺时针：左上、右上、右下、左下 - 容易踩的坑：写成
border-radius: 8px 12px 0本意是“右下不圆角”，结果左下也变成0，因为第三个值赋给了右下，第四个值缺省 → 左下取第二个值12px，不是0
border-radius 在 img 和 flex 子元素上失效的典型原因
不是 border-radius 不起作用，而是它只裁剪「元素自身内容」，不裁剪子元素溢出——尤其当内部有 img 或绝对定位内容时。
- 常见错误现象：父容器设了
border-radius: 50%，但里面img四角还是方的，甚至撑破圆角 - 根本原因：
img默认是替换元素，不响应overflow: hidden的裁剪（旧版 Safari 更明显），且可能因display: block缺失导致基线留白 - 实操建议：
img加display: block消除基线空隙；父容器必须加overflow: hidden；若仍无效，可加img { Object-fit: cover }并确保尺寸匹配 - Flex 场景注意：如果父容器是
display: flex，子项默认align-self: stretch，可能撑满高度破坏圆角，需显式设align-self: flex-start或限制子项尺寸
border-radius 性能和渲染边界问题
绝大多数情况下 border-radius 没性能问题，但在某些组合下会触发层合成或模糊抗锯齿，影响滚动或动画流畅度。
立即学习“前端免费学习笔记（深入）”；
- 性能敏感点：和
box-shadow、transform、半透明背景一起用时，浏览器可能为该元素单独建图层（layer），增加内存开销 - 抗锯齿陷阱：在 Retina 屏上，
border-radius边缘可能出现轻微模糊，尤其1px边框 + 小圆角时；解决方法是避免用小数像素值，或用transform: translateZ(0)强制 GPU 渲染（慎用，可能引发其他合成问题） - 真正容易被忽略的点：SVG 内嵌在 HTML 中时，
<svg></svg>标签本身支持border-radius，但内部<circle></circle>或<rect rx="..."></rect>才是语义化圆角——别把 css 圆角和 SVG 属性混用，否则响应式缩放时行为不一致