语义化变量必须在 :root 中定义并全量引用才具备全局生效能力。需将所有 border-radius 硬编码替换为 var(--radius-md) 等，并覆盖伪元素、状态样式及第三方库；推荐分层命名（--radius-sm/md/lg/round）并加 fallback；局部微调用 calc()，暗色模式可覆盖变量值；注意浏览器兼容性与第三方库变量隔离性。
直接定义语义化变量并确保全量引用，否则“改一个变量就全局生效”只是幻觉。
必须定义在 :root 且覆盖全部使用场景
变量只在 :root 中声明才具备全局继承能力。但声明完不等于生效——只要任意一处 border-radius 是硬编码（比如 border-radius: 4px;），那一处就彻底脱离控制体系。
- 全局搜索项目中所有
border-radius:，把每个值替换成var(--radius-md)这类形式 - 别漏掉伪元素：
::before、::after里的圆角也要加var() - 状态样式如
:hover、:focus同样需要显式引用，否则常态圆、悬停方 - 第三方库（如 Ant Design、Bootstrap）默认不读你的变量，得用更高优先级选择器 +
!important覆盖，或查其文档看是否支持自定义属性（如 Bootstrap 5.3+ 的--bs-btn-border-radius）
推荐分层命名而非单变量兜底
只定义一个 --radius 看似简洁，实际会让按钮要更圆、卡片需适中、头像必须 50% 时陷入僵局。
-
--radius-sm: 2px;（标签、小图标） -
--radius-md: 8px;（按钮、卡片、输入框） -
--radius-lg: 12px;（模态框、大容器） -
--radius-round: 50%;（头像、圆形按钮） - 每个变量后加 fallback：
var(--radius-md, 8px)，防 JS 动态注入失败或旧浏览器降级 - 单位统一用
px（除--radius-round外），避免rem或%在缩放/响应式中失真
局部微调优先用 calc() 而非新增变量
为每个组件单独建变量（如 --radius-card-header）会导致命名爆炸、维护成本飙升。
立即学习“前端免费学习笔记（深入）”；
- 按钮比卡片更圆润？写
border-radius: calc(var(--radius-md) * 1.5); - 暗色模式下取消圆角？在
.dark-theme下覆盖：:root.dark-theme { --radius-md: 0; } - 仅左上+右下圆角？拆开写：
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); - iOS Safari 在
clip-path中对var(--radius)支持不稳定，若用于裁剪，得回退到固定值
Bootstrap 5.3+ 用户注意变量不是通用的
它把圆角拆成语义化变量，但不同组件读不同的变量，不能指望改 --bs-border-radius 就一统天下。
-
--bs-border-radius：影响.rounded类和部分基础组件（如.card），但不控制按钮或表单控件 -
--bs-btn-border-radius：专用于所有.btn类 -
--bs-input-border-radius：v5.3+ 新增，控制.form-control圆角（v5.2 及之前版本该值无效，仍为硬编码） - 检查 DevTools 的 Computed 面板：如果
border-radius显示为具体像素值（如0.375rem），说明组件仍在走旧版逻辑，可能引入的是 CDN 上的低版本
真正卡住人的往往不是怎么写变量，而是哪一行漏了 var()、哪个组件没被覆盖、哪种浏览器在特定属性里不认变量——这些细节一旦出错，整套体系就静默失效。
