layer.open 的 skin 参数是控制圆角的最可靠入口，需配合三层 border-radius（容器、标题栏、内容区/iframe）及 background-clip 等细节才能正确生效。
layer.open 的 skin 参数是控制圆角的最可靠入口
直接改全局 .layui-layer 样式会影响所有弹窗，尤其在多模块共用 layer 的项目里容易引发样式污染。真正可控的方式是用 skin 配置项绑定自定义 class，再通过 css 精准作用于单个弹窗。
关键点：skin 值会作为 class 插入到 body 下的弹窗容器上，例如 skin: 'my-round' → 生成 body .my-round；这个选择器权重足够高，能覆盖 layui 默认样式。
-
layer.open({skin: 'my-round', ...})必须显式传入，不传则 fallback 到默认皮肤 - 自定义 class 名不能含空格或特殊符号，推荐小写+短横线（如
my-round） - 不要用
!important，除非你确认父级有更高权重的 inline style - 圆角必须同时设置外层容器、标题栏、内容区三处，否则会出现“标题圆角但内容直角”的错位感
三层 border-radius 缺一不可
layui 弹窗 DOM 结构分三层：.layui-layer（最外容器）、.layui-layer-title（标题栏）、.layui-layer-content（内容区）。只设其中一层的 border-radius，视觉上依然会露直角。
正确写法示例（CSS）：
body .my-round {
border-radius: 12px;
}
body .my-round .layui-layer-title {
border-radius: 12px 12px 0 0;
}
body .my-round .layui-layer-content {
border-radius: 0 0 12px 12px;
}
- 如果弹窗含 iframe（type: 2），还需额外加
body .my-round .layui-layer-iframe { border-radius: 0 0 12px 12px; } - 若内容区是纯文本（type: 0 或 1），
.layui-layer-content就是最终圆角载体；若是 iframe，则圆角实际落在.layui-layer-iframe上 - 数值统一用 px，避免 rem/em 导致缩放异常
背景色透明导致圆角失效的典型陷阱
很多开发者发现加了 border-radius 却没效果，真实原因是 .layui-layer 默认有白色背景且带阴影，而圆角只作用于元素自身边界——一旦背景填满、阴影盖住边缘，视觉上就“看不见”圆角。
- 检查是否误删了
background-color：某些主题下设为transparent后，父级body背景透出，但阴影仍在，圆角被遮挡 - 临时调试可加
box-shadow: none;确认是否阴影干扰 - 若需保留阴影，建议用
background-clip: padding-box;确保圆角区域不被背景色“撑满” - 切忌用
$(".layui-layer").css("background", "none")全局清除——这会破坏所有弹窗的背景逻辑，包括 message、alert 等快捷方法
动态弹窗中 JS 注入样式的时机风险
有人在 layer.open 的 success 回调里用 jQuery 修改样式，比如 $(".layui-layer-title").css("border-radius", "12px")。这种方式看似灵活，但极易失败。
- success 回调触发时，DOM 已渲染，但 layui 内部可能在后续动画或 resize 中重绘结构，导致样式被覆盖
- 多个弹窗并发打开时，jQuery 选择器会匹配所有已存在的
.layui-layer-title，造成样式污染 - layer 2.8+ 对 DOM 操作更激进，部分版本会在 close 后自动清理内联 style，导致圆角丢失
- 唯一安全的动态方式是：在 open 前预设好 skin，并确保对应 CSS 已加载；不要依赖 JS runtime 补样式
border-radius 就完事，它牵扯到三层 DOM 结构、背景与阴影的层级关系、以及 layui 自身的重绘机制。最容易被忽略的是 iframe 类型弹窗的内容区圆角必须落到 .layui-layer-iframe 上，而不是 .layui-layer-content —— 这个细节在官方文档里根本没提。
