dialog默认圆角不可靠，必须手动重置margin: 0、padding: 1em、border: none、border-radius: 8px；::backdrop不支持圆角；Safari版本过低或polyfill会破坏原生圆角渲染。
dialog 默认圆角不可靠，必须手动重置样式
Chrome 给 <dialog> 加了 16px 外边距和默认圆角，Safari 可能完全没圆角甚至错位，Firefox 表现又不同。不重置的话，border-radius 很可能被浏览器默认 margin 或 padding 抵消，导致视觉上“没生效”。
必须显式设置：margin: 0、padding: 1em、border: none、border-radius: 8px（数值按设计调整）。否则即使写了 border-radius: 12px，也大概率看不到效果。
- 别依赖浏览器默认
border-radius，它不是规范要求，纯属实现差异 -
padding建议用em或rem，避免在缩放或字体变化时内容贴边 - 如果用了
box-shadow，记得配合overflow: hidden防止阴影被裁切
::backdrop 伪元素控制遮罩层圆角？不行，它不支持圆角
::backdrop 是 dialog 模态遮罩的伪元素，但它的作用仅限于设置背景色、透明度和动画，**不支持 border-radius、clip-path 或任何形状裁剪**。试图给它加圆角会静默失败。
所谓“遮罩圆角”，实际是错觉——用户真正看到的圆角只来自 <dialog> 自身的 border-radius 和 overflow: hidden。遮罩层永远是矩形，只是被 dialog 元素的圆角边界“裁”出了视觉圆角效果。
立即学习“前端免费学习笔记（深入）”；
- 给
::backdrop加border-radius完全无效，Chrome/Safari/Firefox 均不识别 - 若需遮罩层有渐变或模糊效果，可用
background+backdrop-filter（注意 Safari 兼容性） - 圆角一致性只取决于
<dialog>的border-radius和父容器是否干扰定位
showModal() 后 dialog 不居中或圆角偏移？检查定位上下文
原生 <dialog> 默认使用 position: absolute 并基于视口居中，但一旦父元素设置了 transform、perspective 或 filter，就会创建新的定位上下文，导致 dialog 相对该父容器定位，而非视口——这时圆角看起来“歪了”或位置异常。
典型场景：dialog 放在 <main style="transform: translateZ(0)"> 里，或整个页面套了 scale() 动画。
- 最简解法：把
<dialog>移到<body>最外层，避开任何带 transform 的祖先 - 若必须嵌套，给最近的非 transform 祖先加
contain: layout paint（现代浏览器） - 不要用
top/left手动调位置——破坏原生居中逻辑，且响应式下失效
Safari 圆角渲染异常？优先检测版本与 polyfill 行为
Safari 15.4+ 才完整支持 showModal() 和焦点锁定，15.2–15.3 存在圆角渲染错位、::backdrop 闪烁等问题。更老版本（如 iOS 15.1）直接不支持 <dialog>。
polyfill（如 dialog-polyfill）虽能补功能，但它用 <div> 模拟，**完全绕过原生 border-radius 渲染路径**，圆角表现和原生不一致，尤其在高 DPI 屏幕上锯齿明显。
- 运行时检测：
if (!('showModal' in HTMLDialogElement.prototype))再决定是否加载 polyfill - polyfill 下的圆角需额外用
border-radius+overflow: hidden在模拟容器上重写，不能复用原生样式规则 - 真机测试比模拟器重要——iOS Safari 的圆角抗锯齿策略和桌面版不同
::backdrop 当成可塑形元素的误解。 
