能，但需注意变量作用域、fallback机制及单位完整性；推荐:root定义基础值并用var(--radius-md, 8px)，避免嵌套覆盖与无单位变量，旧浏览器需前置静态值。
border-radius 用 CSS 变量统一管理，真能省事？
能，但得小心变量作用域和 fallback 机制。直接写 --radius-sm: 4px 没问题，但如果你在组件里覆盖了它，又没显式继承或重设，父级定义的 --radius-md 就不会自动生效。
- 推荐在
:root定义基础值，比如--radius-xs: 2px、--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px - 组件内用
border-radius: var(--radius-md, 8px)—— 后面的8px是降级值，防止变量未定义时全垮 - 别在多个嵌套层级反复定义同名变量，容易被意外覆盖；想局部调整，用新变量名如
--card-radius更安全
不同组件需要不同圆角，怎么避免写一堆重复值？
靠组合变量 + calc() 或函数式思维，而不是为每个组件单独存一个变量。
- 按钮常用
border-radius: var(--radius-sm)，卡片用border-radius: var(--radius-md)，头像强制圆形就写border-radius: 50%（别硬套变量） - 如果某区域需要「左上+右下圆角」，别写四个值再套变量，用
border-top-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg) - 慎用
border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm)这种写法——可读性差，调试时难定位哪个值错了
border-radius 值传入 calc() 或媒体查询时为啥失效？
因为 CSS 变量不能直接参与 calc() 运算，除非你显式拼接单位，且变量本身必须带单位。
- 错误写法：
--radius-base: 6（缺单位），然后calc(var(--radius-base) * 2)→ 结果无效 - 正确写法：
--radius-base: 6px，再用border-radius: calc(var(--radius-base) * 2) - 媒体查询里不能用变量做断点判断（比如
@media (max-width: var(--breakpoint-md))），CSS 不支持；断点仍得写死，变量只管样式值
旧浏览器不支持 CSS 变量，border-radius 会彻底失效吗？
不会，但 fallback 要写对位置。变量是渐进增强，不是替代。
- 必须把静态值写在
var()前面：先写border-radius: 8px，再写border-radius: var(--radius-md, 8px)，否则老浏览器会忽略整条声明 - IE11 及更早版本完全不识别
var()，所以单靠变量定义的圆角在那儿就是直角，务必测试 - PostCSS 插件如
postcss-css-variables可以编译变量为静态值，但注意它无法处理运行时动态变更的场景
变量本身不解决设计系统一致性问题，只提供一种维护手段；真正容易被忽略的是：当设计师改了一版规范，你得同步更新所有 --radius-* 的数值，还不能漏掉某个深埋在组件库里的 var(--radius-input) —— 它可能三年没被人动过，但一出问题就是边缘 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
