border-radius四个值顺序为上左、上右、下右、下左；百分比按宽高分别计算，宽高不等时呈椭圆；overflow: hidden失效常因子元素创建层叠上下文；大边框下圆角半径不可超其一半。
border-radius 的四个值怎么对应四个角
直接写一个数值，比如 border-radius: 8px，是给四个角统一设圆角；但真正灵活控制，得用四个值，顺序是「上左、上右、下右、下左」——和 margin / padding 一致，不是顺时针念错成“上左、上右、下左、下右”。
- 写成
border-radius: 4px 8px 12px 16px：左上=4px，右上=8px，右下=12px，左下=16px - 只写两个值，如
border-radius: 4px 12px：第一个管上下左，第二个管上下右（即左上/左下=4px，右上/右下=12px） - 三个值，如
border-radius: 4px 8px 12px：左上=4px，右上/左下=8px，右下=12px
用百分比做 border-radius 时为什么有时没效果
百分比值是相对于元素的**宽度和高度分别计算**的：水平方向按容器宽度算，垂直方向按高度算。所以如果元素高度为 0（比如未设置 height 且子内容未撑开），border-radius: 50% 在纵向上就趋近于 0px，看起来像没生效。
- 块级元素默认宽度 100%，但高度由内容决定；若想实现正圆，必须让宽高等值（例如加
width: 100px; height: 100px;） -
border-radius: 50%不等于“一定变圆”，它只是把每个角的水平/垂直半径设为各自方向尺寸的 50%；宽高不等时得到的是椭圆角 - Flex 或 Grid 容器中子项若未显式设高，
50%圆角可能塌缩，建议优先用固定像素或配合aspect-ratio
border-radius 和 overflow: hidden 配合失效的常见原因
想用 border-radius 裁剪子元素（比如头像图片溢出），结果圆角没切掉内容，大概率是子元素触发了层叠上下文，绕过了父容器的裁剪边界。
- 子元素带
position: absolute+z-index，或用了transform、opacity 、<code>filter等，都会创建新层叠上下文，导致overflow: hidden失效 - 解决方法：去掉子元素的上述属性；或改用
clip-path: inset(0 round 8px)（兼容性稍差但更可靠） - 注意 Safari 对
border-radius+overflow: hidden在 video 或 iframe 上的支持不稳定，必要时加will-change: transform强制渲染层
border-radius 在不同浏览器中的渲染差异
主流浏览器对 border-radius 支持很好，但细微表现仍有差别，尤其在多值组合或大数值场景下。
- Chrome / Edge 渲染更“平滑”，Firefox 有时会在大圆角（如
border-radius: 200px）下轻微锯齿，尤其是非整数像素值 - Safari 对
border-radius: 50%在 flex 子项上偶有计算偏差，建议避免混用flex+ 百分比圆角 + 无明确尺寸 - IE11 只支持到
border-radius: 8px这种单值写法，多值或百分比会回退为直角（已基本可忽略）
真正难搞的是圆角与边框宽度叠加时的视觉误差：当 border-width 较大（比如 6px），又设了 border-radius: 4px，实际圆角会被截断——因为圆角半径不能超过边框宽度的一半。这个限制在所有浏览器里都存在，但容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
