改一个变量就能全站变圆角，前提是定义在:root且所有border-radius均用var(--radius-md)引用；漏掉硬编码值、伪元素或状态样式、第三方库未覆盖，都会导致失效。
改一个变量就能全站变圆角，前提是它定义在 :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 里的支持也不稳定，这类场景建议回退到固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
