border-radius需按1/2/4值规则设置，四角不规则倒角须用“水平/垂直”双值写法，IE11不支持斜杠语法，超尺寸值会被自动裁剪，单位混用和空格错误易致解析失败。
border-radius 支持四个角分别设置，但值必须成对或单个
很多人试过 border-radius: 10px 20px 30px; 发现右下角没生效——这是因为 CSS 要求四个角的值要么是 1 个（全角统一），要么 2 个（水平/垂直同设），要么 4 个（顺时针：左上、右上、右下、左下）。少写一个，浏览器会自动补全：第三个值缺失时，它会复制第一个值给右下角。
想实现不规则倒角，必须给够四个值，且每个角可拆为 水平值 / 垂直值 形式：
border-radius: 10px / 5px 20px / 8px 15px / 12px 5px / 6px;
这表示：左上角横 10px 纵 5px，右上角横 20px 纵 8px，右下角横 15px 纵 12px，左下角横 5px 纵 6px。
用斜杠分隔的“水平/垂直”写法容易被忽略兼容性
双值写法（如 10px / 5px）在现代浏览器都支持，但 IE 完全不认。如果你项目还需兼容 IE11，只能退回到单值方案，或用 SVG 替代。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 10px 20px 30px 40px;—— 所有浏览器都 OK，但所有角都是正圆弧 -
border-radius: 10px / 20px;—— 横向统一 10px，纵向统一 20px，适合椭圆化整体边缘 - 真正不规则又需兼容老浏览器？得放弃
border-radius，改用clip-path或背景图
border-radius 超出盒子尺寸时会被裁剪，不是失效
当某个角的 border-radius 值超过该角所在方向的半宽或半高（比如左上角设了 50px / 50px，但盒子本身只有 30px 高），浏览器不会报错，而是自动把弧度压到最大可行值——也就是取 min(水平值, 宽度/2) 和 min(垂直值, 高度/2)。
这意味着：
- 动态内容导致盒子尺寸变化时，倒角视觉效果可能突变
- 用
rem或%设border-radius时，要预判最小尺寸下的弧度是否仍合理 - 调试时发现弧度“变小了”，先检查盒子实际渲染尺寸，别急着改 CSS
多个 border-radius 值混用时，顺序和空格很关键
写成 border-radius: 10px 20px/30px 40px; 是合法的，等价于 10px 20px 30px 40px；但写成 border-radius: 10px/20px 30px/40px; 就是四角独立椭圆——斜杠只作用于紧邻它的前后两个值，不是整组分隔符。
常见手误：
- 漏空格：
10px/20px30px/40px→ 解析失败，回退到默认 0 - 多斜杠：
10px/20px/30px→ 无效声明，整条规则被丢弃 - 单位混用：
10px / 2em合法，但若父容器 font-size 动态变，纵弧度会意外缩放
不规则倒角看着灵活，实际每多一个斜杠、每换一种单位，就多一层隐式依赖。上线前最好在真机+不同字号下点开开发者工具，拖动盒子实时看弧度响应。
