必须将圆角变量定义在 :root 中，因其是 CSS 最高层级伪类，确保所有后代元素（含 Shadow DOM、iframe、第三方组件）继承；写在 html 或 body 下会导致旧版 Safari、UI 库主题、PostCSS 插件无法读取，变量失效。
为什么必须把圆角变量写在 :root 里
因为只有 :root 是 CSS 规范定义的最高层级伪类，能确保变量被所有后代元素（包括 Shadow DOM、iframe 内容、第三方组件）继承。写在 html 或 body 下看似差不多，但旧版 Safari、部分 UI 库主题系统、甚至某些 PostCSS 插件会读不到——不是“偶尔失效”，而是根本没注入作用域。
常见错误：body { --radius-md: 8px; } 看似生效，但子组件里 var(--radius-md) 可能返回 unset；html[data-theme="dark"] { --radius-md: 0; } 无法在媒体查询中复用同一变量作用域，导致暗色模式切换断裂。
语义化命名比单变量更可靠
只定义一个 --radius 看似省事，但按钮要小圆角、卡片需中等、头像必须 50%，后期全得硬编码回退。直接崩掉变量体系。
-
--radius-sm: 2px;（标签、小图标、紧凑控件） -
--radius-md: 8px;（按钮、输入框、卡片主体） -
--radius-lg: 12px;（模态框、大容器） -
--radius-round: 50%;（头像、圆形按钮）
每个变量都带单位（px 或 %），否则 calc() 会报错；加 fallback 更稳妥：var(--radius-md, 8px)，防 JS 动态注入失败或 IE11 降级。
立即学习“前端免费学习笔记（深入）”；
哪些地方最容易漏掉 var(--radius-*) 引用
不是改了变量就自动生效，而是每一处 border-radius 都得手动替换。漏掉一处，那一处就彻底脱离控制。
- 硬编码值：
.btn { border-radius: 4px; }—— 必须改成border-radius: var(--radius-sm); - 伪元素：
::before和::after里的圆角常被忽略，比如弹窗遮罩层的过渡圆角 - 状态样式：
:hover、:focus、:active的规则若没显式引用变量，会出现“常态圆、悬停方”的视觉断裂 - 第三方库：
Ant Design用--ad-border-radius，Bootstrap 5.3+分--bs-btn-border-radius和--bs-border-radius，不查文档直接覆盖会失效
局部微调别新建变量，用 calc() 和 max()
为每个组件建 --radius-card-header 这类变量，等于主动制造命名爆炸和维护黑洞。
推荐做法：
- 按钮比卡片稍圆：
border-radius: calc(var(--radius-md) * 1.3);（注意：--radius-md必须带单位，否则calc失效） - 卡片最小圆角保障：
border-radius: max(8px, var(--radius-md));（仅现代浏览器支持） - 单独控制某角：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
iOS Safari 在 clip-path 中对 var(--radius) 支持不稳定，做图片裁剪时建议回退到固定值，别强依赖变量。
