border-radius: 50%仅在宽高等值时生成正圆，否则为椭圆；圆角矩形只需合法值如8px即可，但需元素有尺寸且父容器配overflow: hidden裁剪子元素。
能直接用 border-radius 实现，但“圆角矩形”和“完美圆形”触发条件完全不同——前者只要值合法就出效果，后者必须宽高相等且用 50%（或精确半值），否则全是椭圆。
border-radius 写多少才出圆角矩形
写一个数值（如 border-radius: 8px）就能出标准圆角矩形，但前提是元素得有可渲染的块状区域：
- 必须设
width和height，或靠内容+padding撑开尺寸；纯文字的<span></span>默认display: inline，不加display: inline-block或display: block就没反应 - 没背景色、没边框、内容为空，圆角“存在但不可见”——不是失效，是没东西可裁剪
- 值越大越圆，
border-radius: 999px在小容器里会被浏览器截断为最大可能值，不如用50%稳定
为什么 border-radius: 50% 总是椭圆，不是正圆
border-radius: 50% 是按宽度算水平半径、按高度算垂直半径，宽高不等 → 必然椭圆。这不是 bug，是规范行为：
- 想得到正圆，唯一可靠方式：让元素宽高等值（如
width: 80px; height: 80px），再配border-radius: 50% - 现代方案可用
aspect-ratio: 1替代固定宽高，但 Safari 15.4 以下不支持，需 fallback - 别信“设大点就圆了”，
border-radius: 40px在80px × 60px元素上，右下角会溢出变直角
img 元素加圆角老是失败，关键在哪
<img alt="怎么利用HTML的CSS border-radius创建圆角矩形或完美圆形元素" > 是替换元素，border-radius 对它本身生效，但视觉裁剪常被干扰：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
width和height（不能只设一个，也不能依赖父容器 100%） - 父容器若没设
overflow: hidden，图片可能撑破圆角边界；但只靠父容器裁剪不够稳 - 最稳妥写法：
<img style="max-width:90%" alt="怎么利用HTML的CSS border-radius创建圆角矩形或完美圆形元素" > - 旧版 iOS Safari 可能漏渲染，加
overflow: hidden到<img alt="怎么利用HTML的CSS border-radius创建圆角矩形或完美圆形元素" >自身可缓解（非必需，但有效）
四个角要不同圆角，怎么写不晕
顺序就是顺时针：左上 → 右上 → 右下 → 左下。别记简写规则，直接写四值最安全：
-
border-radius: 4px 8px 12px 0= 左上 4px、右上 8px、右下 12px、左下 0（直角） - 如果只写三个值，比如
border-radius: 4px 8px 12px，等价于4px 8px 12px 8px（左下取第二个值），容易误判 - 单角控制更清晰：
border-top-right-radius: 8px比混在四值里改更易读、不易错 - 所有单角属性（如
border-bottom-left-radius）不支持百分比值，在 Safari 旧版有兼容问题，统一用px
真正卡住人的往往不是语法，而是元素没尺寸、父容器没裁剪、或者把 50% 当万能解——它只在正方形里画圆，其余全是椭圆。动手前先盯紧 width、height、overflow 这三样。
