如何用CSS变量控制圆角体系并统一组件外观？

必须将圆角变量定义在: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-*) 引用

硬编码值不报错，但会让全局控制“断链”。最常出问题的几类：

1. .btn { border-radius: 4px; } —— 即使你写了 :root { --radius-btn: 6px; }，这行也直接绕过变量
2. .card:hover { border-radius: 0; } —— 悬停时用了固定值，“常态圆、悬停方”
3. .card::before { border-radius: 2px; } —— 伪元素漏改，视觉断裂
4. Bootstrap 5.2.x CDN 文件：border-radius: 0.375rem 是 Sass 编译死值，不读 --bs-border-radius；v5.3+ 才开始支持
5. 第三方库组件（如 el-input）默认不认你的变量，得用 .my-input { border-radius: var(--radius-md) !important; } 强制接管

怎么定义语义化变量才不踩坑

别只定义一个泛用的 --radius，后期按钮要更圆、卡片要更大、头像要全圆时就卡死。推荐分层命名 + 统一单位：

:root {--radius-sm: 2px;--radius-md: 8px;--radius-lg: 12px;--radius-round: 50%;}

关键点：

1. 单位统一用 px（除 --radius-round 外），避免 rem 或 % 在缩放或容器尺寸变化时失真
2. 命名带语义，比如 --radius-btn 比 --radius-2 更易维护
3. 每个变量后加 fallback：border-radius: var(--radius-md, 8px);，防 JS 注入失败或旧浏览器兜底
4. 不要为每个尺寸新建变量（如 --radius-input-sm），优先用计算：border-radius: calc(var(--radius-md) * 1.2);

局部微调和暗色模式怎么安全做

局部差异化不该靠新增变量堆砌，而应利用 CSS 原生能力做轻量覆盖：

1. 按钮比卡片更圆润：button { border-radius: calc(var(--radius-md) * 1.3); }（注意：--radius-md 必须带单位，否则 calc() 失效）
2. 暗色模式下取消圆角：.dark-theme :root { --radius-md: 0; }，但需同步调整 border 和 background，否则直角边框在深色背景上更割裂
3. 左上+右下单独圆角：border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);，比写四个值再套变量更可控
4. iOS Safari 在 clip-path: circle(50% at center) 里对 var(--radius) 支持不稳定，若用于裁剪，得回退到固定值

真正难的不是定义变量，而是确保每一处 border-radius 都被追踪到——哪怕只有一处漏网，比如某个 ::after 里的硬编码，整个一致性就破防。