dialog元素默认不支持border-radius，需配合overflow:hidden和outline:none生效，并用::backdrop覆盖背景；firefox下需额外包裹内层div并设max-height、overflow-y:auto及inherit圆角，禁用focus-visible outline以避免跳变。
dialog元素默认不支持border-radius
直接给 <dialog></dialog> 设置 border-radius 无效，因为浏览器对它的渲染有特殊规则：它本质是被 display: block + position: absolute（或 fixed）包裹的原生模态容器，且内部没有可直接圆角的“外层盒子”。你看到的边框其实是其伪元素或底层渲染层控制的。
必须用backdrop + outline + overflow:hidden组合绕过限制
真正生效的圆角方案依赖三层配合：
-
<dialog></dialog>自身设border-radius+overflow: hidden（裁剪内部内容溢出） - 用
::backdrop伪元素覆盖背景，避免圆角边缘透出底色 - 禁用原生焦点环干扰：加
outline: none，否则圆角会被虚线框“撑开”
示例关键 CSS：
dialog {
border-radius: 12px;
overflow: hidden;
outline: none;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
Firefox 下需额外处理 focus-visible 和滚动条截断
Firefox 对 <dialog></dialog> 的 border-radius 支持更脆弱，尤其当内容高度超出、触发滚动时，圆角常在顶部/底部失效。原因在于滚动容器未继承父级圆角裁剪。
- 给
<dialog></dialog>内部直接包裹一层<div>，并设 <code>max-height: 80vh+overflow-y: auto - 该内层
<div> 也要加 <code>border-radius: inherit和overflow: hidden - 移除
dialog:focus-visible的默认 outline，Firefox 会强制重绘导致圆角跳变 -
<dialog></dialog>是语义化模态组件，应保持其role="dialog"和焦点管理逻辑完整 - 任何用
clip-path模拟圆角的方案，在高缩放比或打印样式下会丢失边缘 - 最简健壮路径就是：原生
border-radius+overflow: hidden+outline: none，其他都是临时补丁
不要依赖 transform 或 box-shadow 模拟圆角
有人尝试用 transform: scale() 配合父容器 overflow: hidden “压出”圆角，或靠大 box-shadow 盖住直角——这些在 Safari 和 Chrome 新版本中极易失效，且破坏语义和可访问性。
圆角是否生效，最终取决于浏览器对 <dialog></dialog> 渲染层的裁剪策略，不是 CSS 层面能完全控制的；所以务必在 Chrome、Safari、Firefox 中单独验证滚动与聚焦状态下的边缘表现。
