不能通过全局CSS变量一次性修改所有组件圆角，因为Layui 2.8中定义的--layui-border-radius等变量未被任何组件样式引用，构建时已静态编译为固定值，实际CSS中无var()调用，动态修改无效。
不能通过全局 css 变量一次性修改所有组件圆角。layui 2.8 虽然在源码中定义了 --layui-border-radius 等变量，但这些变量**未被任何组件样式引用**，最终生成的 layui.css 里所有圆角值（如 border-radius: 2px）都是硬编码的固定值。
为什么改 :root 里的 --layui-border-radius 没用
你写 :root { --layui-border-radius: 6px; } 后发现按钮、弹窗、表格圆角全没变，是因为：
- Layui 的构建流程是 Sass 静态编译，变量只在开发阶段参与计算，输出 CSS 时已被替换成具体数值
-
layui.css中搜索var(--layui-border-radius)结果为空，证明无任何规则依赖它 - 即使你在页面中动态改
document.documentElement.style.setProperty('--layui-border-radius', '6px')，也毫无效果——没有监听者，也没有 CSS 规则读取它
真正能批量改圆角的可行方式
必须覆盖关键组件的 CSS 类，且需逐个处理，不存在“一行变量通杀”方案。常见组件圆角来源如下：
-
.layui-btn：默认border-radius: 2px，需覆盖.layui-btn, .layui-btn-primary, .layui-btn-danger等所有变体 -
.layui-layer：弹层圆角由.layui-layer-page, .layui-layer-dialog的border-radius控制，注意.layui-layer-loading是纯 SVG，无圆角 -
.layui-input, .layui-select, .layui-textarea：统一用.layui-input, .layui-select, .layui-textarea, .layui-form-select dl覆盖 -
.layui-table：表头和单元格本身无圆角，但外容器.layui-table-box有border-radius: 2px，需单独处理
推荐在页面末尾加这段 CSS（注意加载顺序必须在 layui.all.js 之后）：
<style>
.layui-btn, .layui-btn-primary, .layui-btn-danger, .layui-btn-warning,
.layui-input, .layui-select, .layui-textarea,
.layui-form-select dl,
.layui-table-box,
.layui-layer-page, .layui-layer-dialog {
border-radius: 6px !important;
}
</style>
容易被忽略的兼容性细节
部分组件圆角不是靠 border-radius 实现的：
-
.layui-nav导航栏的“高亮条”是伪元素::after绝对定位，改border-radius不影响它；要调圆角得同步改.layui-nav-bar的border-radius -
laydate日期面板的圆角在.layui-laydate上，但它内部单元格（如日期数字）用了overflow: hidden和border-radius双重控制，只改外层不够 - 使用
skin: 'molv'或'classic'主题时，部分圆角值被写死在皮肤类里（如.layui-layer-molv .layui-layer-title），需额外覆盖
没有“全局变量一劳永逸”这回事——Layui 的圆角是离散写死的，批量修改的本质是批量选择器覆盖，且每类组件都得单独验证效果。
