原生 alert() 无法加圆角，因浏览器强制使用操作系统级对话框或受限 UA 样式，CSS 如 border-radius 完全无效；推荐用原生 dialog 元素实现可定制圆角警告框，支持完整 CSS 控制与良好可访问性。
原生 alert() 无法加圆角，这是浏览器强制样式
所有主流浏览器（Chrome、Firefox、Safari、Edge）对 alert() 使用的是操作系统级对话框或受限的 UA 样式，border-radius 等 CSS 完全无效。你无论怎么写 document.styleSheets 或注入样式，都改不了它——这不是 bug，是规范限制。
常见错误现象包括：
- 在 DevTools 里手动给
alert元素加border-radius，发现没效果，甚至找不到对应 DOM 节点 - 用
iframe或伪元素覆盖，结果遮不住原生弹窗，或触发安全策略报错
用 dialog 元素实现可定制圆角警告框
dialog 是现代 HTML 原生标签，支持完整 CSS 控制，包括 border-radius、阴影、动画等，且语义正确、可访问性友好（配合 aria-label 和 inert）。
基础用法示例：
立即学习“前端免费学习笔记（深入）”；
<dialog id="warning-dialog">
<p>操作不可逆，请确认</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a>
<p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button onclick="this.closest('dialog').close()">取消</button>
<button onclick="doAction(); this.closest('dialog').close()">确定</button>
</dialog>
<script>
document.getElementById('warning-dialog').showModal();
</script>
关键实操建议：
- 必须用
showModal()触发，show()不会居中也不阻塞交互 - 圆角直接加在
dialog上：dialog { border-radius: 12px; }，但注意 Safari 15.4+ 才完全支持dialog的圆角渲染 - 为避免底部滚动条闪动，建议全局加：
dialog::backdrop { background: rgba(0,0,0,0.5); } - 移动端需补
dialog { min-width: 80vw; }防止过窄
兼容旧浏览器？用轻量级 JS 模态库替代
如果项目需支持 IE 或 Safari dialog 会回退失败。此时推荐用不依赖框架的微库，比如 modal-promise 或手写 20 行 div + position: fixed 实现。
一个最小可行方案要点：
- 外层容器设
position: fixed; top: 0; left: 0; width: 100%; height: 100%，加background: rgba(0,0,0,0.4) - 内容盒子设
border-radius: 14px、box-shadow、margin: auto居中 - 必须监听
Escape键和点击 backdrop 关闭，否则可访问性不达标 - 禁止 body 滚动：打开时加
document.body.style.overflow = 'hidden'，关闭时还原
别忽略焦点管理与键盘导航
圆角只是视觉层，真正影响体验的是交互逻辑。原生 alert() 自动聚焦、阻塞、支持 Tab/Enter/Escape —— 自定义弹窗若没处理这些，用户（尤其屏幕阅读器使用者）会卡住。
必须做的三件事：
- 弹出后用
focus()主按钮（如dialog.querySelector('button:last-child').focus()） - 按
Tab应在弹窗内循环，不能跳到背景页元素（用focus-trap库或手动拦截focusout） - 关闭弹窗后，焦点要回到触发它的按钮上（存
document.activeElement再恢复）
圆角调得再顺滑，焦点乱跳一次，用户信任就掉一半。这个细节，90% 的自定义弹窗都漏了。
