使用CSS变量快速调整全站圆角弧度

通过修改一个变量就能让全站圆角统一变化，其前提是该变量必须定义在 :root 中，并且所有 border-radius 都要以 var(--radius-md) 形式引用——只要遗漏任何硬编码值（例如 border-radius: 4px），全局控制功能便会失效。

圆角变量必须写入 :root，而非 html 或 body

:root 是 CSS 中层级最高的伪类，能确保变量被所有后代元素（包括 Shadow DOM、iframe 内容）有效继承；若使用 html { --radius: 8px; }，在旧版 Safari 或部分组件库中可能无法被读取。body { --radius: 8px; } 更不可取——它并非根元素，子组件中使用 var(--radius) 很可能返回 unset。

推荐写法：

:root {  --radius-sm: 2px;  --radius-md: 8px;  --radius-lg: 12px;  --radius-round: 50%;}

应避免使用通用名称 --radius，后期增加按钮、卡片等差异化样式时容易陷入困境；单位统一采用 px（--radius-round 除外），以防 rem 或 % 导致缩放变形。

所有 border-radius 必须显式引用 var()，包括伪元素和状态

常见失效原因并非变量未定义，而是样式根本未引用它：

• .btn { border-radius: 4px; } —— 这种硬编码将完全绕过变量体系
• .card:hover { border-radius: 0; } —— 悬停时使用了固定值，导致“常态圆角、悬停直角”
• .card::before { border-radius: 4px; } —— 伪元素遗漏修改，视觉割裂

检查方法很简单：全局搜索 border-radius:，将所有未使用 var() 的部分替换掉。即使只有一处遗漏，整体一致性也会被破坏。

正确写法示例：

.btn {  border-radius: var(--radius-sm);}.btn:hover {  border-radius: var(--radius-sm);}.card::before {  border-radius: var(--radius-md);}

第三方 UI 库（如 Ant Design、Layui）不会自动识别你的变量

这些库拥有自身的样式体系，不会主动读取你定义的 --radius-md：

• Ant Design / Mantine：查阅文档看是否开放 theme.radius 钩子，优先使用官方主题配置
• Layui 2.8：变量在构建时已被静态编译，--layui-border-radius 在最终 CSS 中不存在，必须手动覆盖类选择器并加 !important
• Bootstrap v5.2.3 及更早版本：.card 默认采用 border-radius: 0.375rem 硬编码，:root 覆盖无效；v5.3+ 才开始支持 var(--bs-border-radius)

强制接管的兜底写法：

.my-btn {  border-radius: var(--radius-md) !important;}

局部微调优先使用 calc() 或 max()，避免新建变量

为每个组件创建 --radius-btn-sm、--radius-card-header 会导致变量爆炸，逻辑难以记忆：

• 按钮要比卡片更圆润？写 border-radius: calc(var(--radius-md) * 1.5);（注意：--radius-md 必须带单位，否则 calc 失效）
• 卡片需要最小 8px 半径？写 border-radius: max(8px, var(--radius-md));（仅现代浏览器支持）
• 头像强制圆形？直接写 border-radius: 50%，它不属于同一设计语义层，没必要套用变量

暗色模式下想取消圆角，不必重定义变量，而是在 .dark-theme 下覆盖：

.dark-theme {  --radius-md: 0;}

最容易被忽略的是图片裁剪场景：img 添加了 border-radius 但未配合 overflow: hidden，看起来像未生效——其实变量已起作用，只是内容溢出。iOS Safari 对 var(--radius) 在 clip-path 里的支持也不稳定，此类场景建议回退到固定值。