:root 中，并且项目中所有 border-radius 属性都必须使用 var(--radius-md) 引用——只要有一处硬编码（比如 border-radius: 4px），全局控制就会失效。此外，伪元素、状态样式、第三方库等任何遗漏都会破坏整体一致性。
通过修改一个变量就能让全站圆角统一变化，其前提是该变量必须定义在 :root 中，并且所有 border-radius 都要以 var(--radius-md) 形式引用——只要遗漏任何硬编码值（例如 border-radius: 4px），全局控制功能便会失效。
圆角变量必须写入 :root，而非 html 或 body
:root 是 CSS 中层级最高的伪类，能确保变量被所有后代元素（包括 Shadow DOM、iframe 内容）有效继承；若使用 html { --radius: 8px; }，在旧版 Safari 或部分组件库中可能无法被读取。body { --radius: 8px; } 更不可取——它并非根元素，子组件中使用 var(--radius) 很可能返回 unset。
推荐写法：
:root { --radius-sm: 2px; --radius-md: 8px; --radius-lg: 12px; --radius-round: 50%;}
应避免使用通用名称 --radius，后期增加按钮、卡片等差异化样式时容易陷入困境；单位统一采用 px（--radius-round 除外），以防 rem 或 % 导致缩放变形。
所有 border-radius 必须显式引用 var()，包括伪元素和状态
常见失效原因并非变量未定义，而是样式根本未引用它：
.btn { border-radius: 4px; }—— 这种硬编码将完全绕过变量体系.card:hover { border-radius: 0; }—— 悬停时使用了固定值，导致“常态圆角、悬停直角”.card::before { border-radius: 4px; }—— 伪元素遗漏修改，视觉割裂
检查方法很简单：全局搜索 border-radius:，将所有未使用 var() 的部分替换掉。即使只有一处遗漏，整体一致性也会被破坏。
正确写法示例：
.btn { border-radius: var(--radius-sm);}.btn:hover { border-radius: var(--radius-sm);}.card::before { border-radius: var(--radius-md);}
第三方 UI 库（如 Ant Design、Layui）不会自动识别你的变量
这些库拥有自身的样式体系，不会主动读取你定义的 --radius-md：
- Ant Design / Mantine：查阅文档看是否开放
theme.radius钩子，优先使用官方主题配置 - Layui 2.8：变量在构建时已被静态编译，
--layui-border-radius在最终 CSS 中不存在，必须手动覆盖类选择器并加!important - Bootstrap v5.2.3 及更早版本：
.card默认采用border-radius: 0.375rem硬编码，:root覆盖无效；v5.3+ 才开始支持var(--bs-border-radius)
强制接管的兜底写法：
.my-btn { border-radius: var(--radius-md) !important;}
局部微调优先使用 calc() 或 max()，避免新建变量
为每个组件创建 --radius-btn-sm、--radius-card-header 会导致变量爆炸，逻辑难以记忆：
- 按钮要比卡片更圆润？写
border-radius: calc(var(--radius-md) * 1.5);（注意：--radius-md必须带单位，否则calc失效） - 卡片需要最小 8px 半径？写
border-radius: max(8px, var(--radius-md));（仅现代浏览器支持） - 头像强制圆形？直接写
border-radius: 50%，它不属于同一设计语义层，没必要套用变量
暗色模式下想取消圆角，不必重定义变量，而是在 .dark-theme 下覆盖：
.dark-theme { --radius-md: 0;}
最容易被忽略的是图片裁剪场景：img 添加了 border-radius 但未配合 overflow: hidden，看起来像未生效——其实变量已起作用，只是内容溢出。iOS Safari 对 var(--radius) 在 clip-path 里的支持也不稳定，此类场景建议回退到固定值。
