用 --radius 自定义属性统一管理圆角是最轻量易维护的方式，需全局引用、避免硬编码，并通过 calc() 或分层变量（如 --radius-btn）应对差异化需求，同时注意 Safari 兼容性及响应式缩放问题。
用 --radius 变量统一管理所有圆角
直接把圆角值抽成 CSS 自定义属性，是最轻量、最易维护的全局控制方式。所有用到 border-radius 的地方都引用它，改一处就全变。
常见错误是写成 border-radius: var(--radius, 4px) 后，在子组件里又硬编码写死 border-radius: 8px，结果变量失效。必须确保所有圆角都走变量，不留“漏网之鱼”。
- 根元素定义：
:root { --radius: 6px; } - 按钮、卡片、输入框等通用组件统一用：
border-radius: var(--radius); - 需要局部微调时，优先用计算：
border-radius: calc(var(--radius) * 1.5);，而不是另起一个变量 - 避免在媒体查询里重复定义
--radius，应直接覆盖变量值：@media (prefers-reduced-motion: reduce) { :root { --radius: 0; } }
不同组件对 --radius 的响应策略
不是所有元素都适合套同一个圆角值。按钮可以圆润些，表单控件可能需更克制，而模态框角落有时要更大气——这时候靠单一变量不够，得加层级。
典型场景：深色主题下，input 边框太锐利会显得割裂；移动端小按钮若和桌面端共用 --radius，可能过圆导致点击热区难辨。
- 基础层（全局）：
--radius控制默认值，如4px - 语义层（组件）：
--radius-input、--radius-btn等按需覆盖，但默认回退到--radius - 不要为每个尺寸写新变量，比如
--radius-sm、--radius-lg，容易失控；用calc()或函数式思维处理比例关系
border-radius 在 Safari 和旧版 Chrome 中的兼容性陷阱
大部分现代浏览器对 var(--radius) + border-radius 支持良好，但 Safari 15.4 之前不支持在 border-radius 里用 calc() 套变量，比如 border-radius: calc(var(--radius) * 2) 会直接失效，回退为 0。
错误现象：开发时看着正常，上线后 iOS 用户看到全是直角。
- 验证方式：在真机 Safari 上打开 DevTools → Elements → 查看 computed 样式中
border-radius是否被解析为有效值 - 稳妥写法：只用
var(--radius)，不用嵌套calc()；如需倍数，提前算好，定义--radius-lg: 12px; - 如果必须动态计算，可用 JS 注入样式：
document.documentElement.style.setProperty('--radius-lg', `${Number(getComputedStyle(document.documentElement).getPropertyValue('--radius').trim()) * 2}px`);
当设计系统要求「圆角随字号缩放」时怎么办
有些设计规范要求圆角随 font-size 动态变化（比如 border-radius: 0.25em），这时不能依赖固定像素的 --radius，否则响应式断点一换，圆角就僵住。
本质问题是：CSS 变量本身不感知上下文单位，var(--radius) 是静态字符串替换，不会自动把 4px 转成 0.25em。
- 可行解：把变量定义成相对单位，例如
--radius: 0.25em;，然后所有组件统一用它 - 风险点：如果某处父容器
font-size极小（如10px），0.25em就只有2.5px，视觉上接近直角，需加最小限制：border-radius: max(2px, var(--radius));（注意max()在 Safari 15.6+ 才稳定支持） - 更稳方案：用
clamp()控制区间：border-radius: clamp(2px, var(--radius), 12px);
变量不是银弹，真正难的是让设计师、前端、组件库三方对「哪些地方该圆、圆多少、何时破例」达成共识。没共识，再好的 --radius 也会被各种 !important 和硬编码绕开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
