CSS圆角变量必须统一在:root定义，如--radius-sm:4px;，禁用硬编码；需设fallback值，响应式与主题切换通过覆盖:root实现，第三方库用!important桥接。
直接在 :root 里定义语义化 --radius 变量
所有圆角必须从一个源头出发，:root 是最稳妥的作用域。别用 .app 或某个 wrapper 类去定义，否则媒体查询、暗色模式切换、Shadow DOM 内部都会失效。
推荐命名具体且可读，比如：--radius-sm: 4px;、--radius-md: 8px;、--radius-lg: 12px;。避免只写一个 --radius，后期组件差异化调整会卡死。
- 值必须带单位（
6px，不是6），否则在calc()里会出错 - 每个变量后建议加 fallback，如
var(--radius-md, 8px)，防止 JS 动态注入失败或旧浏览器兜底 - 不要在多个嵌套选择器里重复定义同名变量，比如
.card :root { --radius-md: 10px; }—— 这不会覆盖全局，反而制造混乱
所有组件必须显式引用 var(--radius-*)，禁用硬编码
这是最容易漏掉也最致命的一环：改了变量，但按钮还是尖角，大概率是 .btn { border-radius: 4px; } 这种写法还活着。
检查方式很简单：全局搜索 border-radius:，把所有没套 var() 的都干掉。哪怕只有一处漏网，一致性就破防。
- 按钮用
border-radius: var(--radius-sm); - 卡片用
border-radius: var(--radius-md); - 头像强制圆形？直接写
border-radius: 50%，别硬套变量 —— 它不属于同一设计语义层 - 需要局部微调时，优先用
calc(var(--radius-md) * 1.5)，而不是另起--radius-card-header
响应式与主题切换不能靠重定义变量，得靠覆盖
CSS 变量不支持在媒体查询里“赋值”，@media (max-width: 768px) { --radius-md: 4px; } 是非法语法，编译或运行时都会被忽略。
正确做法是在同一作用域下直接覆盖：
:root {
--radius-md: 8px;
}
<p>@media (max-width: 768px) {
:root {
--radius-md: 4px;
}
}</p><p>.dark-theme {
--radius-md: 10px;
}</p>
- 暗色模式类（如
.dark-theme）要加在或上，确保能影响所有子元素 - 移动端小按钮若圆角过大，别单独开新变量，直接在对应组件类里用
calc()缩小，例如border-radius: calc(var(--radius-md) / 2); - iOS Safari 对
var(--radius)在clip-path中的支持不稳定，这类场景建议回退到固定值
第三方 UI 库的圆角怎么同步？靠 CSS 变量桥接
Ant Design、Element Plus 这类库的样式不认你的 Less/Sass 变量，也不自动读取 :root，硬改源码或加 !important 是下策。
更可持续的方式是用 CSS 变量“桥接”：
.ant-btn,
.el-button {
border-radius: var(--radius-sm, 4px) !important;
}
<p>.ant-card,
.el-card {
border-radius: var(--radius-md, 8px) !important;
}</p>
- 务必加
!important，因为这些库的默认样式优先级高 - fallback 值（
4px）不能省，否则未注入变量时整个 UI 圆角归零 - 如果项目用了 CSS-in-JS（如 styled-components），变量需通过
injectGlobal或主题对象手动透传，Less/Sass 变量完全无效
真正难的不是定义变量，而是让每一行 border-radius 都经过它 —— 没有例外，没有“就这一个地方特殊”，否则下次设计改圆角，你得再花半小时找漏网之鱼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
