必须将圆角变量定义在:root中，因它是CSS规范唯一保证被Shadow DOM、iframe及第三方组件（如Ant Design）正确继承的顶层作用域；写在html或body中会导致旧版Safari忽略或子元素读取为unset。
必须把圆角变量定义在 :root，且所有 border-radius 声明都显式调用 var()，否则改了变量也无效——这不是浏览器问题，是样式根本没读它。
为什么写在 :root 而不是 html 或 body
因为 :root 是 CSS 规范中唯一保证被 Shadow DOM、iframe、第三方组件（如 Ant Design）正确继承的顶层作用域。写在 html { --radius-md: 8px; } 里，旧版 Safari 可能忽略；写在 body 下则完全失效——body 不是根元素，子选择器里 var(--radius-md) 会返回 unset。
检查方式：打开 DevTools → Computed 面板 → 找任意带圆角的元素 → 看 border-radius 的来源是否显示为 var(--radius-md)。如果显示的是 4px 或 0.375rem，说明该规则压根没接入变量体系。
哪些地方最容易漏掉 var(--radius-*) 引用
硬编码值不报错，但会让全局控制“断链”。最常出问题的几类：
立即学习“前端免费学习笔记（深入）”；
-
.btn { border-radius: 4px; }—— 即使你写了:root { --radius-btn: 6px; }，这行也直接绕过变量 -
.card:hover { border-radius: 0; }—— 悬停时用了固定值，“常态圆、悬停方” -
.card::before { border-radius: 2px; }—— 伪元素漏改，视觉断裂 - Bootstrap 5.2.x CDN 文件：
border-radius: 0.375rem是 Sass 编译死值，不读--bs-border-radius；v5.3+ 才开始支持 - 第三方库组件（如
el-input）默认不认你的变量，得用.my-input { border-radius: var(--radius-md) !important; }强制接管
怎么定义语义化变量才不踩坑
别只定义一个泛用的 --radius，后期按钮要更圆、卡片要更大、头像要全圆时就卡死。推荐分层命名 + 统一单位：
:root {
--radius-sm: 2px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-round: 50%;
}
关键点：
- 单位统一用
px（除--radius-round外），避免rem或%在缩放或容器尺寸变化时失真 - 命名带语义，比如
--radius-btn比--radius-2更易维护 - 每个变量后加 fallback：
border-radius: var(--radius-md, 8px);，防 JS 注入失败或旧浏览器兜底 - 不要为每个尺寸新建变量（如
--radius-input-sm），优先用计算：border-radius: calc(var(--radius-md) * 1.2);
局部微调和暗色模式怎么安全做
局部差异化不该靠新增变量堆砌，而应利用 CSS 原生能力做轻量覆盖：
- 按钮比卡片更圆润：
button { border-radius: calc(var(--radius-md) * 1.3); }（注意：--radius-md必须带单位，否则calc()失效） - 暗色模式下取消圆角：
.dark-theme :root { --radius-md: 0; }，但需同步调整border和background，否则直角边框在深色背景上更割裂 - 左上+右下单独圆角：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);，比写四个值再套变量更可控 - iOS Safari 在
clip-path: circle(50% at center)里对var(--radius)支持不稳定，若用于裁剪，得回退到固定值
真正难的不是定义变量，而是确保每一处 border-radius 都被追踪到——哪怕只有一处漏网，比如某个 ::after 里的硬编码，整个一致性就破防。
