border-radius四个参数顺序为左上、右上、右下、左下，顺时针排列；只圆右上角应写为0 8px 0 0，空角必须显式设0，否则无效。
border-radius 四个参数怎么写才生效
直接说结论：border-radius 支持四个值，顺序是「左上、右上、右下、左下」，和 margin / padding 一样顺时针记，不是「上下左右」。写错顺序，圆角就长歪了。
常见错误现象：明明写了 border-radius: 8px 4px 2px 1px，但左下角没变圆——其实是你把第四个值当成了“左上”，实际它控制的是左下角。
- 标准写法：
border-radius: 8px 12px 4px 6px→ 左上=8px，右上=12px，右下=4px，左下=6px - 如果只写三个值，如
border-radius: 8px 12px 4px，等价于8px 12px 4px 12px（第四个值复用第二个） - 两个值：如
border-radius: 8px 4px→ 左上/右下=8px，右上/左下=4px - 一个值：全部四角统一
想让某一个角单独变圆？别只写一个值
很多人想「只圆右上角」，就试 border-radius: 0 8px 0 0，结果发现左下角也变了——因为第四个值是左下，不是右上。你得按四值顺序填满，空角必须显式写 0。
使用场景：卡片右上带小圆角、按钮仅左下角尖锐、弹窗只左上/右上圆角……都得靠四值精准控制。
- 只圆右上角：
border-radius: 0 8px 0 0 - 只圆左下角：
border-radius: 0 0 0 8px - 左上+右下圆，其余直角：
border-radius: 6px 0 6px 0 - 注意：设为
0才真正“不圆”，留空或写auto不合法，会被浏览器忽略
border-radius 支持 x/y 双值写法，但四个参数里每个都能拆
你可能见过 border-radius: 10px / 5px，这是椭圆角写法。而「四个参数」其实可以扩展成「八参数」：每角独立指定水平半径和垂直半径。
语法是：border-radius: tlx tly trx try brx bry blx bly，其中 tl=top-left，tr=top-right，依此类推；x 是水平半径，y 是垂直半径。
- 简写四值（全圆角）：
border-radius: 8px 12px 4px 6px - 等价八值（仍为圆角）：
border-radius: 8px/8px 12px/12px 4px/4px 6px/6px - 让右上角变成椭圆：
border-radius: 0 12px/6px 0 0→ 水平半径12px，垂直半径6px - 兼容性注意：IE 不支持斜杠写法，
/在 IE 中会整个声明失效
border-radius 值太大时，边缘会被截断
当某个角的 border-radius 值超过盒子自身宽高一半，浏览器会自动限制——比如一个 width: 20px; height: 20px 的盒子，border-radius: 15px 实际生效的是 10px（即 min(15px, 10px)），否则边框会溢出或渲染异常。
这在响应式布局中容易被忽略：容器尺寸变小后，原来安全的 border-radius: 12px 可能突然导致圆角塌陷或出现意外直角。
- 检查方式：用 DevTools 查看 computed 样式里的
border-top-left-radius等具体值，它可能和你写的不一样 - 动态场景（如 CSS-in-JS 或 JS 设置样式）建议用相对单位（
em、rem）或clamp()控制上限 - Flex/Grid 子项若设了
min-width: 0或overflow: hidden，也可能影响圆角裁剪表现
0、椭圆要斜杠、大值会被压，这几个点踩中一个，圆角就不可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
