border-radius 四值顺序为左上、右上、右下、左下，斜杠分隔水平/垂直半径；三值会补全为“左上、右上、右下、右上”，易出错；需配合 overflow: hidden 才能裁剪子元素。
border-radius 的四个值怎么填才不晕
填错顺序，圆角就歪了。它不是按“上右下左”顺时针记，而是按「水平半径 / 垂直半径」成对出现，最多四组，每组两个值。
常见错误现象：border-radius: 10px 20px 30px; —— 这其实是三个值，浏览器会自动补全第四个（复制第二个），变成 10px 20px 30px 20px，结果和你想象的很可能不一致。
- 单值：
border-radius: 8px;→ 四个角都是 8px 圆角（等效于8px 8px 8px 8px） - 双值：
border-radius: 4px 12px;→ 水平半径 4px，垂直半径 12px，应用到所有角 - 三值：
border-radius: 5px 10px 15px;→ 等效于5px 10px 15px 10px（左上、右上、右下、左下） - 四值：
border-radius: 3px 6px 9px 12px;→ 明确指定左上、右上、右下、左下
单独控制某个角的圆角（比如只圆右上角）
用斜杠分隔，前半部分是各角的「水平半径」，后半部分是各角的「垂直半径」，顺序都是左上→右上→右下→左下。
使用场景：做卡片右上角打标签、弹窗只圆两个角、按钮仅左端圆润等。
立即学习“前端免费学习笔记（深入）”；
- 只圆右上角：
border-radius: 0 8px 0 0 / 0 8px 0 0; - 左上和右下为椭圆，其余为直角：
border-radius: 10px 0 0 10px / 20px 0 0 20px; - 注意：斜杠前后都必须有四个值，缺一不可；少于四个值会触发自动补全逻辑，容易出错
border-radius 遇到 overflow: hidden 失效？
不是失效，是子元素溢出遮罩没生效——border-radius 只作用于自身盒模型的边框，但内部内容仍可能突破这个视觉边界，尤其当子元素用了 position: absolute 或负 margin。
性能影响：开启 border-radius 后若内部有大量滚动/动画内容，某些旧版 Chrome 会出现渲染卡顿，本质是层叠上下文变化引发重绘。
- 确保父容器设置
overflow: hidden;（这是关键，不是可选） - 避免子元素用
transform: translateZ(0)或will-change: transform强制提升图层，这会绕过父级overflow剪裁 - 如果子元素是图片，记得加
display: block;防止底部留白导致圆角被撑开
SVG 和 canvas 里怎么模拟 border-radius 效果
CSS 的 border-radius 对 SVG 元素无效（<rect></rect> 用 rx/ry，<path></path> 得手写圆弧命令），canvas 更得自己算坐标。
兼容性影响：Safari 15.4 之前，border-radius 在 iframe 或跨域 canvas 中可能被忽略；Firefox 对超大圆角（如 50%）的渲染精度略低于 Chrome。
- SVG
<rect></rect>圆角：<rect rx="6" ry="6"></rect>（注意rx和ry可不同） - Canvas 绘制圆角矩形：别硬套
arcTo，用现成的roundRectAPI（Chrome 100+、Firefox 113+ 支持）：ctx.roundRect(x, y, w, h, [5, 5, 5, 5]); - 老环境 fallback：用
beginPath+ 四段arc手动拼，注意角度和方向，稍有偏差就会断开
圆角真正难的不是写法，是当它和 transform、filter、backdrop-filter、clip-path 同时出现时，渲染层级和剪裁顺序会悄悄变——这时候看 DevTools 的 Layers 面板比查文档管用。
