layui弹层圆角需逐层设置三层dom的border-radius并处理背景与阴影，否则因默认白色背景和阴影遮挡导致失效；推荐用自定义skin配合body前缀+!important精准控制。
直接加 border-radius 不生效，是因为 layui 默认的白色背景和阴影盖住了圆角边缘——得同时处理背景、阴影和多层容器的圆角。
为什么只写 .layui-layer{border-radius:12px} 没用
layer 弹层由三层 DOM 嵌套组成：.layui-layer（外框）、.layui-layer-title（标题）、.layui-layer-content（内容），圆角必须逐层设置，否则会出现“标题圆了、内容直角”或“内容溢出”的情况。更关键的是：.layui-layer 默认有 background-color: #fff 和 box-shadow，这两者会完全遮挡 border-radius 的视觉效果。
- 只改
.layui-layer圆角 → 阴影边缘仍是直角，看起来没变化 - 只改
.layui-layer-content→ 标题和按钮区域还是直角，上下不统一 - 删掉 background-color 或设为 transparent → 可能导致文字看不清，或父级背景透出干扰
最稳妥的 CSS 写法（推荐复制即用）
给弹层加自定义 skin，避免污染全局样式：
layer.open({
skin: 'my-round',
content: '这是圆角弹窗',
area: ['400px', '200px']
});
对应 CSS（注意必须带 body 前缀 + !important）：
body .my-round {
border-radius: 12px !important;
}
body .my-round .layui-layer-title {
border-radius: 12px 12px 0 0 !important;
}
body .my-round .layui-layer-content {
border-radius: 0 0 12px 12px !important;
}
- 数值统一用
px，别用rem或%，缩放时容易错位 - 如果弹窗是
type: 2（iframe），还得额外加：body .my-round .layui-layer-iframe { border-radius: 0 0 12px 12px !important; } - 不要写
border-radius: 50%——按钮或窄弹窗会变成椭圆
背景透明导致圆角“消失”的真实原因
很多开发者发现加了 border-radius 但没效果，实际是 background-color: transparent 后，.layui-layer 的阴影仍在，而阴影绘制在背景层之上，把圆角边缘“压平”了。这时候不是样式没生效，而是被遮住了。
- 临时调试：加
box-shadow: none !important确认是否阴影干扰 - 想保留阴影又显圆角：加
background-clip: padding-box !important，让背景色不撑到边框边缘 - 切忌用
$(".layui-layer").css("background", "none")全局清除——所有弹窗都会崩
按钮区域也要单独处理圆角
layer.open 的按钮不在弹层主体内，而是独立的 .layui-layer-btn 容器，类名是 .layui-layer-btn0、.layui-layer-btn1 等，必须单独写样式：
.my-round .layui-layer-btn button {
border-radius: 6px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
- 不要只写
.layui-layer-btn button—— 会覆盖其他弹层的按钮 - 如果用了
btnAlign: 'c'，按钮外层多了.layui-layer-btnflex，此时优先调padding，别动margin - Layui 2.8+ 按钮自带
transition，加圆角后 hover 动画仍可用，不用额外补
真正麻烦的不是写几行 CSS，而是要同时控制三层 DOM、背景裁剪、阴影层级和按钮定位——漏掉任意一层，圆角就“断掉”了。
