能但需注意变量作用域、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 要写对位置。变量是渐进增强不是替代。 WisPaper 复旦大学研发的AI学术搜索工具5分钟内筛选1000篇论文