改一个css变量就能全局统一圆角，前提是定义在:root且所有border-radius都用var()引用；漏掉硬编码值、伪元素或状态样式、第三方库未覆盖，都会导致失效。
改一个 CSS 变量就能让按钮、卡片、输入框全部变圆或变方，前提是变量定义在 :root，且所有 border-radius 都显式引用它——漏掉任何一处硬编码值，全局控制就失效。
为什么改了 --radius-md 但某些组件没变
不是变量没生效，而是样式根本没读它。常见现象包括：
-
.btn { border-radius: 4px; }这种写死值会完全绕过变量体系 - 伪元素（
::before、::after）或状态（:hover、:focus）里忘了加var(--radius-md)，导致“常态圆、悬停方” - 第三方库（如 Ant Design）默认不认你的变量，得用更高优先级选择器 +
!important覆盖
检查方式很简单：全局搜索 border-radius:，把所有没套 var() 的都替换掉。哪怕只有一处漏网，一致性就破防。
:root 中该定义几个圆角变量
别只定义一个泛用的 --radius，后期组件差异化调整会卡死。推荐语义化分层：
-
--radius-sm: 2px;（小图标、标签） -
--radius-md: 8px;（按钮、卡片、输入框） -
--radius-lg: 12px;（模态框、大容器） -
--radius-round: 50%;（头像、圆形按钮）
单位统一用 px（除 --radius-round 外），避免 rem 或 % 引发缩放失真；每个变量后建议加 fallback：var(--radius-md, 8px)，防止 JS 注入失败或旧浏览器兜底。
如何安全地做局部微调而不失控
别为每个尺寸新建变量（比如 --radius-btn-sm、--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) 支持不稳定，若用于裁剪，得回退到固定值。
Less/Sass 项目中变量怎么和 CSS 自定义属性对齐
Less/Sass 是编译期变量，无法运行时切换主题。真要支持暗色模式或响应式圆角，必须桥接到 CSS 自定义属性：
- 在
variables.less或_variables.scss里定义@border-radius-md: 8px;或$radius-md: 8px; - 再通过 CSS 输出映射：
:root { --radius-md: @border-radius-md; }或:root { --radius-md: #{$radius-md}; } - 所有组件样式统一用
border-radius: var(--radius-md);，而非直接插值
Webpack 项目容易出错的地方是 less-loader 路径配置错误，导致 @import "variables" 找不到文件；Vue 单文件组件中需显式 @import "@/styles/variables.less";，否则变量不可见。
最常被忽略的不是语法，而是 overflow: hidden 和 border-radius 的协作关系——父容器没加 overflow: hidden，子元素照样能撑破圆角边界；变量改得再准，视觉上还是直角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
