必须在 :root 中定义圆角 CSS 变量，如 :root { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-round: 50%; }，避免使用泛命名和混合单位，确保所有组件样式引用 var(--radius-*) 并覆盖伪元素与状态。
如何在 :root 中正确定义圆角 CSS 变量
必须把圆角变量写进 :root，而不是某个局部选择器里，否则组件无法继承。常见错误是定义在 .theme-light 或 body 下，结果子元素用 var(--radius) 读不到值。
推荐写法：
:root {
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-round: 50%;
}注意：--radius 这种泛命名容易被覆盖或误用，优先用语义化名称，比如 --radius-btn、--radius-card；单位统一用 px，避免 rem 或 %（除 --radius-round 外），防止缩放或容器尺寸变化时圆角失真。
为什么有些组件没响应 var(--radius-*) 修改
不是变量没生效，而是样式没真正引用它。硬编码的 border-radius: 4px 会完全绕过变量体系，改了 :root 也无济于事。
立即学习“前端免费学习笔记（深入）”；
- 检查所有带圆角的类（如
.btn、.card、.input）是否都用了border-radius: var(--radius-md); - 确认伪元素（
::before、::after）和状态（:hover、:focus）也同步引用，否则会出现“正常时圆、悬停时方”的断裂感 - 第三方 UI 库（如 Ant Design、Mantine）默认不读你的 CSS 变量，需手动覆盖：用更高优先级选择器 +
border-radius: var(--radius-md) !important;，或通过其主题配置桥接（如 Mantine 的theme.radius）
如何安全地做局部微调而不破坏全局一致性
别为每个尺寸新建变量（如 --radius-btn-sm、--radius-btn-lg），变量爆炸后没人记得清逻辑。用计算式更轻量、更可控。
例如：
.btn--pill {
border-radius: calc(var(--radius-md) * 2);
}
<p>.card--featured {
border-radius: max(var(--radius-lg), 12px);
}关键点：
- 用
calc()基于基础变量推导，保留语义关联 - 避免在媒体查询里重定义
--radius-*（如@media (max-width: 768px) { :root { --radius-md: 2px; } }），这会导致 SSR 渲染错乱或首次加载闪动；应直接在对应断点内覆盖具体组件的border-radius - 深色模式下若要取消圆角，用
.dark :root { --radius-md: 0; }比分散写.dark .btn { border-radius: 0; }更可靠
Safari 和旧版 iOS 的兼容性陷阱
CSS 变量本身在 Safari 9.1+ 支持良好，但两个细节极易出问题：
-
border-radius值为0 0 8px 8px这类非对称多值时，iOS Safari 12–14 有渲染抖动，建议统一用单值（8px）或双值（8px / 8px）写法 - 当
border-radius和clip-path同时使用（如圆形头像裁剪），iOS Safari 对var(--radius-round)解析不稳定，回退到固定值更稳妥：clip-path: circle(50% at center); border-radius: 50%; - IE11 完全不支持 CSS 变量，若需兼容，必须双写：
border-radius: 4px; border-radius: var(--radius-md, 4px);
最常被忽略的是：变量修改后，开发者往往只测主流程按钮和卡片，却忘了表单控件的 input[type="date"]、select 等原生元素——它们的圆角通常由浏览器 UA 样式控制，必须显式重置才能纳入变量体系。
