必须将圆角和阴影变量定义在:root才能全局生效，因:root是css最高层级伪类，可被shadow dom、iframe及第三方库正确继承；若写在html、body或组件类中，旧版safari或ant design等会忽略，导致var()返回unset。
必须把圆角和阴影变量都定义在 :root，所有 border-radius 和 box-shadow 声明必须显式调用 var()，否则改了变量也等于没改。
为什么:root是唯一安全的定义位置
写在 html 或 body 里，旧版 Safari 会忽略；写在组件类或主题类（如 .theme-dark）里，Shadow DOM、iframe、Ant Design 这类第三方组件根本读不到，var(--radius-md) 直接返回 unset。DevTools 的 Computed 面板里如果看到 border-radius: 4px 而不是 var(--radius-md)，说明样式压根没接入变量体系。
border-radius 变量怎么命名才不翻车
避免泛命名（如 --radius）和混合单位（如 --radius-sm: 2 缺少 px 或 rem），否则 calc(var(--radius-sm) * 2) 会失效。推荐语义化五档命名 + 统一单位：
-
--radius-xs: 0.125rem（2px）——用于分隔线、小图标背景 -
--radius-sm: 0.25rem（4px）——按钮、输入框基础圆角 -
--radius-md: 0.5rem（8px）——卡片、模态框主容器 -
--radius-lg: 1rem（16px）——大弹窗、全屏操作面板 -
--radius-full: 50%——头像、图标徽章
别用 --radius-btn 或 --radius-card 这类过度细分的变量，除非设计上真有不可妥协的差异；否则维护成本陡增，且容易漏同步。
box-shadow 变量如何与圆角配合不锯齿
圆角切不到阴影上、边缘发虚，不是 CSS 写错了，是浏览器渲染机制：阴影按原始矩形扩散，再被 border-radius 裁剪。关键约束是：border-radius 值必须 ≥ box-shadow 的 blur + spread 之和。例如：
- 若
--shadow-md: 0 4px 12px 2px rgba(0,0,0,0.1)（blur=12px, spread=2px），则对应圆角至少要14px，即border-radius: var(--radius-lg) - Less/Sass 中可加注释提醒：
// ⚠️ @radius should >= @blur + @spread when used together - 颜色优先用
var(--shadow-color, #000)而非硬编码rgba(0,0,0,0.1)，方便深色模式切换
第三方组件（如 Ant Design）怎么桥接变量
它们不读你的 Less/Sass 变量，也不自动继承你定义的 CSS 变量——除非你主动覆盖。最稳妥的方式是在自定义样式中显式桥接：
- 对 Ant Design 的
.ant-btn，写border-radius: var(--radius-sm) !important;（仅当必要时） - 更优雅的做法：用 CSS 自定义属性兜底，比如
border-radius: var(--radius-btn, var(--radius-sm)); - 检查 Webpack 的
less-loader是否启用了modifyVars，它只影响入口文件，不会动态更新已@import的子文件中的变量引用
真正难的不是定义变量，而是确保每一处 border-radius 和 box-shadow 都走 var() ——漏掉一个硬编码值，整个体系就出现视觉断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
