必须将圆角变量定义在:root中才能确保全局继承和跨框架兼容，因为:root是css规范规定的最高层级伪类，优先级高于html和body，能被shadow dom、iframe及所有后代元素正确读取；若写在html或body中，旧版safari或第三方ui库可能无法继承，导致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) 很可能读不到。
第三方 UI 库（如 Ant Design、Element Plus）或自定义 Web Component 若未显式继承 html 下的变量，就会 fallback 到初始值或完全不生效。
哪些地方最容易漏掉 var(--radius-*) 引用
硬编码值不报错，但会悄悄破坏一致性，最常出问题的几类：
-
.btn { border-radius: 4px; }—— 即使你写了:root { --radius-btn: 6px; }，这行也直接绕过变量体系 - 伪元素或状态样式：
.card:hover::before { border-radius: 2px; }，没套var()，悬停时就“突然变方” - Bootstrap 5.2.x 或更早版本的 CDN 文件：它们用 Sass 编译时硬编码
border-radius: 0.375rem，根本不读--bs-btn-border-radius - 图片容器：
img加了border-radius: var(--radius-md)，但父容器没设overflow: hidden，看起来像没生效
怎么安全地支持局部差异化圆角
别为每个组件新建变量（比如 --radius-input-sm），变量爆炸后没人记得清逻辑。优先用计算和语义 fallback：
- 基础值统一设在
:root：--radius-md: 8px; - 按钮稍圆润：
button { border-radius: calc(var(--radius-md) * 1.3); }（注意：--radius-md必须带单位，否则calc()失效） - 卡片需要更大半径但不想新增变量：
.card { border-radius: max(12px, var(--radius-md)); }（仅现代浏览器支持） - 左上+右下单独圆角：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);，比写四个值再套变量更可控
暗色模式与响应式覆盖的正确写法
CSS 变量不能在媒体查询里“赋值”，@media (prefers-color-scheme: dark) { --radius-md: 0; } 是非法语法，会被浏览器忽略。
正确做法是直接覆盖 :root 的值：
:root {
--radius-md: 8px;
}
@media (prefers-color-scheme: dark) {
:root {
--radius-md: 0;
}
}
@media (max-width: 768px) {
:root {
--radius-md: 4px;
}
}
注意：iOS Safari 对 clip-path 中的 var(--radius) 支持不稳定，若用于裁剪头像或卡片，建议回退到固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
