必须将圆角变量定义在:root（如--btn-radius: 8px），所有按钮类统一用border-radius: var(--btn-radius)引用；漏掉任一硬编码值或未覆盖伪元素/第三方库样式，全局调整即失效。

怎么用 CSS 变量统一改所有按钮的圆角

直接改 border-radius 值只能单点生效，批量微调必须抽离为变量。最稳妥的方式是把圆角值定义在 :root，再让所有按钮类引用它。

• 在全局 CSS 顶部写：:root { --btn-radius: 8px; }
• 所有按钮类（如 .btn、.primary-btn）统一用 border-radius: var(--btn-radius);
• 想临时加个“更圆一点”的主题？只需覆盖变量：.theme-soft { --btn-radius: 12px; }
• 别用 --r 或 --br 这类缩写，语义不清容易误改；推荐 --btn-radius-sm / --btn-radius-lg

为什么改了 CSS 却没生效：常见干扰项

不是变量没写对，而是被其他样式盖住了。浏览器开发者工具里看到 border-radius 被划掉，大概率是这几个原因。

• UI 框架（比如 Bootstrap）重置了 button 的 border 和 overflow —— 加一句 overflow: visible; 或 overflow: hidden; 显式声明
• 父容器设了 overflow: hidden，把圆角裁掉了，检查上层 DOM 结构
• 用了 -webkit-appearance: button（默认值），某些 Safari 版本下会压制 border-radius，强制加 -webkit-appearance: none;
• 写了 border-radius: 8 没带单位——CSS 不认，必须是 8px、0.5rem 或 50%

移动端圆角渲染异常怎么办

部分安卓 WebView 和旧版 iOS Safari 对大数值圆角（比如 border-radius: 999px）支持不稳定，可能显示为直角或锯齿。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 避免用超大像素值模拟“胶囊形”，改用 border-radius: 9999px 不如用 border-radius: 50px（只要 ≥ 容器高度一半即可）
• 如果卡片或按钮含 box-shadow 或渐变背景，老 Safari 可能圆角内切不齐，加 background-clip: padding-box 反而露白边，IE11 必须禁用它
• 真要兼容 Android 4.x WebView？降级方案：用 clip-path: inset(0 round 8px)，但注意它会同步裁剪点击热区
• 测试时别只看 Chrome 模拟器——真机连上 DevTools 实时调试，尤其留意 iOS 14–15 和 Samsung Internet

JS 动态改圆角时性能和边界问题

用户拖动滑块实时调整圆角？别遍历每个按钮元素 setAttribute，那样会触发多次重排。

立即学习“前端免费学习笔记（深入）”；

• 只操作根变量：document.documentElement.style.setProperty('--btn-radius', '10px');
• 别在 input 或 scroll 事件里高频调用，加节流（throttle）或用 requestAnimationFrame
• 注意：CSS 变量本身不触发重排，但若同时改了 width / height，圆角百分比（如 50%）会重新计算，可能造成视觉跳变
• 如果按钮用了 aspect-ratio: 1 / 1 做响应式正圆，动态改 --btn-radius 没问题；但别同时改 aspect-ratio，Safari 15.4+ 才支持可变 aspect-ratio

真正麻烦的从来不是改一行 border-radius，而是模板里分散在多个 CSS 文件、媒体查询、甚至内联 style 中的同名规则——得先 grep 出所有匹配项，再决定是归口到变量，还是用 !important 强制覆盖。