不能通过 CSS 自定义变量一次性修改 Layui 2.8 所有组件的边框圆角，因为其 CSS 变量在构建时已被静态编译为固定值，最终 CSS 中不存在可运行的自定义属性；必须逐个类显式重写 border-radius 并用 !important 覆盖高权重样式。
不能通过 css 自定义变量一次性修改 layui 2.8 所有组件的边框圆角。
为什么修改 --layui-border-radius 无效
Layui 2.8 虽然在源码中定义了类似 --layui-border-radius 的 CSS 变量，但构建时已「静态编译」——所有变量都被替换成固定数值，最终生成的 layui.css 中根本不存在可运行的 CSS 自定义属性。你在 :root 里覆盖它，或用 JS 改 document.documentElement.style，都不会生效。
真正起作用的是直接覆盖具体类的选择器
边框圆角由各组件的 CSS 类硬编码控制，比如：
-
.layui-btn用border-radius: 2px -
.layui-input, .layui-textarea用border-radius: 2px -
.layui-card用border-radius: 4px -
.layui-layer（弹层）用border-radius: 2px
必须逐个类显式重写，没有统一入口。推荐做法是集中定义一套重置规则：
.layui-btn,
.layui-input,
.layui-textarea,
.layui-select,
.layui-checkbox,
.layui-radio,
.layui-card,
.layui-layer,
.layui-table th,
.layui-table td {
border-radius: 4px !important;
}
注意：!important 在这里必要，因为 Layui 2.8 的原始样式权重较高；若只想改部分组件，删掉对应选择器即可。
表格圆角要单独处理
表格（table.render()）的圆角不在上述通用类里，它的容器 .layui-table-view 默认无圆角，且内部结构嵌套深。若需给整个表格加圆角，得包裹一层自定义容器并设 overflow: hidden：
<div class="table-rounded"> <div id="demo"></div> </div>
再配 CSS：
.table-rounded {
border-radius: 6px;
overflow: hidden;
}
.table-rounded .layui-table-view {
margin: 0;
}
否则直接给 .layui-table 加 border-radius 没用，它不生效。
最易被忽略的一点：Layui 的圆角值不是全局联动的，每个组件独立写死。想“一次改全”只能靠 CSS 覆盖，且必须覆盖到所有目标类——漏掉 .layui-layer 或 .layui-card，它们就还是默认的 2px。
