必须将圆角变量定义在 :root 中，如 :root { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-round: 50%; }，因其是唯一能穿透 iframe、Shadow DOM 和样式隔离边界的规范根作用域；写在 html 或 body 中会被旧版 Safari 和多数 Web Component 忽略。
必须把圆角变量写在 :root 里，否则组件读不到
不是所有地方定义的 --radius-md 都能被子元素继承。写在 html 或 body 里，旧版 Safari 和多数 Web Component（比如 Shadow DOM 内部）会直接忽略它。只有 :root 是 CSS 规范规定的真正根作用域，能穿透 iframe、第三方库、自定义元素的样式隔离边界。
常见错误写法：
-
html { --radius-md: 4px; }—— Ant Design、Mantine 等 UI 库里的按钮可能不响应 -
body { --radius-md: 4px; }—— 伪元素、::before里用var(--radius-md)直接 fallback 到initial
正确写法只有一种：
:root {
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-round: 50%;
}硬编码 border-radius: 4px 是全局控制的最大漏洞
改了 :root 里的值但页面没变？八成是某处漏掉了 var() 引用。硬编码不报错，但等于给变量体系打了个洞。
立即学习“前端免费学习笔记（深入）”；
最容易漏掉的几类地方：
- 第三方组件的覆盖样式没重写，比如 Bootstrap 的
.btn仍用border-radius: 0.375rem - 状态样式：
.card:hover { border-radius: 2px; }—— 悬停时突然变方 - 伪元素：
.badge::after { border-radius: 100%; }—— 这个100%不受变量控制 - 图片容器没配
overflow: hidden，圆角看着像没生效
局部差异化优先用 calc() 和 max()，别堆变量
为每个组件新建 --radius-input-sm、--radius-modal-corner 这类变量，三个月后没人记得清逻辑。语义化变量要克制，计算才是安全扩展方式。
几个实用模式：
- 按钮比卡片稍圆润：
button { border-radius: calc(var(--radius-md) * 1.2); }（注意：--radius-md必须带单位，否则calc()失效） - 卡片需要最小半径但不想新增变量：
.card { border-radius: max(12px, var(--radius-lg)); }（仅现代浏览器支持） - 只调两个角：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);，比写四值更可控
第三方 UI 库不自动读你的 var(--radius-*)
Ant Design、Element Plus、Mantine 默认不接入你定义的 CSS 变量。它们要么用 Sass 编译死值，要么依赖自己的主题系统。
想让它响应你的圆角规范，只有两条路：
- 手动覆盖：用更高权重选择器 +
!important，例如.ant-btn { border-radius: var(--radius-md) !important; } - 查文档桥接：Mantine 支持
theme.radius = 'var(--radius-md)'；Element Plus 从 2.3.0+ 开始允许通过el-config-provider注入 CSS 变量
暗色模式下还要同步检查边框颜色、阴影扩散度是否与新圆角匹配，否则视觉会失衡——这点常被忽略。
