必须将圆角变量定义在 :root 中，因其是 CSS 规范定义的唯一根作用域，可穿透 Shadow DOM、iframe 和 Web Component 隔离；写在 html 或 body 会导致 Safari 兼容问题或伪元素/子组件失效。
必须把圆角变量定义在 :root 里，否则组件读不到；所有 border-radius 都得显式写成 var(--radius-md)，漏一处硬编码就等于全局控制失效。
为什么写在 :root 而不是 html 或 body
因为 :root 是 CSS 规范定义的唯一根作用域，能穿透 Shadow DOM、iframe 和第三方 Web Component 的样式隔离边界。写在 html 里，旧版 Safari 可能忽略；写在 body 里，伪元素和子组件里的 var(--radius-md) 很可能 fallback 到初始值或直接不生效。
常见错误写法：
-
html { --radius-md: 4px; }—— Ant Design、Mantine 等 UI 库按钮不响应 -
body { --radius-md: 4px; }——::before里用var(--radius-md)直接失效
哪些地方最容易漏掉 var(--radius-*) 引用
硬编码不报错，但会悄悄破坏一致性。最常出问题的几类：
立即学习“前端免费学习笔记（深入）”；
-
.btn { border-radius: 4px; }—— 即使你写了:root { --radius-btn: 6px; }，这行也绕过变量体系 -
.card:hover { border-radius: 2px; }—— 悬停时突然变方 -
.badge::after { border-radius: 100%; }—— 这个100%不受变量控制 - 第三方库（如 Bootstrap 5.2 或更早 CDN）仍用
border-radius: 0.375rem，根本不读 CSS 变量 - 图片容器加了
border-radius: var(--radius-md)，但父容器没设overflow: hidden，圆角看着像没生效
怎么安全地支持局部差异化圆角
别为每个组件新建变量（比如 --radius-input-sm），三个月后没人记得清逻辑。优先用计算和语义 fallback：
- 基础值统一设在
:root：--radius-md: 8px; - 按钮稍圆润：
button { border-radius: calc(var(--radius-md) * 1.3); }（注意：--radius-md必须带单位，否则calc()失效） - 卡片需要更大半径但不想新增变量：
.card { border-radius: max(12px, var(--radius-md)); }（仅现代浏览器支持） - 只调两个角：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);，比写四值更可控
第三方 UI 库（如 Bootstrap 5.3+、Element Plus）怎么对接
它们有自己的一套变量命名，不能指望改一个就全变：
- Bootstrap 5.3+：
--bs-btn-border-radius控按钮，--bs-input-border-radius控表单控件，--bs-border-radius只影响.rounded类和部分基础组件（如.card） - Element Plus：
--el-border-radius-base是基础值，但按钮、弹窗等组件各自读不同的变量（如--el-border-radius-button） - 变量必须在库的 CSS 加载前注入 DOM，否则被忽略；检查 DevTools 的 Computed 面板，确认
border-radius显示的是var(--xxx)而不是具体像素值
最易被忽略的点：iOS Safari 在 clip-path 中对 var(--radius) 支持不稳定，若用于裁剪头像或容器，得回退到固定值；另外，所有变量定义必须带单位（px 或 %），calc() 才能正常工作。
