CSS自定义圆角变量--radius需设在:root下全局生效，所有border-radius必须用var(--radius)引用，避免硬编码；第三方库需查其CSS变量钩子或覆盖；暗色模式须确保html[data-theme="dark"]作用域正确。
用 CSS 自定义属性统一控制圆角
核心就一句话：--radius 这个变量设在哪，决定了你改一次能影响多大范围。设在 :root 是全局生效的最简路径，但得小心组件库或第三方样式覆盖它。
- 必须用
:root { --radius: 8px; }，不能只写html { --radius: 8px; }—— 后者不保证所有后代元素都能继承到 - 组件内部如果写了
border-radius: 4px这种硬编码值，会直接忽略--radius，得同步改成border-radius: var(--radius); - 别在媒体查询里重复定义
--radius，除非真需要响应式圆角（比如移动端更小），否则容易漏改某一处
PostCSS 或构建工具里批量替换的风险点
有人图省事用 postcss-advanced-variables 或正则把 border-radius: 4px 全替成 border-radius: var(--radius)，结果发现按钮变方了——因为有些地方本该是 border-radius: 50%（头像）或 border-radius: 0（表格边框）。
- 自动替换只适用于「所有圆角都同源」的项目，中后台系统常符合；但内容型站点、营销页往往需要差异化
- 检查
input、button、textarea的默认样式是否被重置，某些 reset.css 会强制写死border-radius - 如果用了 Tailwind，别动它的
rounded-工具类，而是改theme.borderRadius配置项，它底层也是靠 CSS 变量注入
主题切换时圆角不生效的典型原因
加了暗色模式后，--radius 在 [data-theme="dark"] 下改了，但页面没反应，大概率是作用域没对上。
- 确保暗色模式 class 加在
或上，而不是某个容器 div —— 否则var(--radius)找不到对应作用域 - 不要写
[data-theme="dark"] { --radius: 4px; }，而要写html[data-theme="dark"] { --radius: 4px; }，避免层级太深导致变量未被继承 - 用浏览器开发者工具的「Computed」面板看目标元素最终解析出的
border-radius值，确认是不是真的读到了新变量，还是 fallback 到了初始值
第三方 UI 库（如 Ant Design、Element Plus）怎么接入
它们大多不认你的 --radius，得看文档有没有暴露 CSS 变量钩子。没有的话，只能覆盖，但得注意优先级和 specificity。
- Ant Design v5+ 支持
--ant-border-radius，直接在:root里赋值就行；v4 只能靠less变量重编译 - Element Plus 用的是
--el-border-radius，但它默认值是2px，如果你设成8px，记得同步调高--el-border-radius-small和--el-border-radius-large，不然el-button--small会突兀 - 覆盖时别用
!important，改用更高 specificity，比如.el-button { border-radius: var(--radius) !important; }容易引发后续维护问题
改一个变量就能全站换圆角，这事成立的前提是：所有圆角都经过同一套变量链路，且没人绕过它硬写像素值。现实里最常卡住的地方不是不会写 var(--radius)，而是漏改了某处 reset.css、某个封装组件的 scoped style、或者第三方库的默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
