alert()无法设置圆角，因其由系统/浏览器UI层控制，CSS完全无效；应使用自定义DOM弹窗，通过border-radius、overflow:hidden及无障碍属性（如role="alertdialog"）实现可访问的圆角警告框。
浏览器原生 alert() 无法设置圆角
直接说结论：alert() 是浏览器内置的模态对话框，由操作系统或浏览器 UI 层控制，HTML/CSS 完全无法干预它的样式，包括边框、圆角、颜色、字体等。你写的 border-radius 对它零作用。
替代方案：用自定义弹窗 + CSS 控制圆角
真正能加圆角的是你自己写的 DOM 元素。核心思路是隐藏原生 alert()，改用 <div> 模拟，并用 CSS 控制外观：
<ul>
<li>用 <code>position: fixed 或 position: absolute 让弹窗居中浮层
border-radius: 8px（或任意你需要的值）box-shadow 增强视觉层次，避免显得“贴边”tabindex="-1" 和 focus() 处理键盘可访问性示例最小结构：
<div id="alert-box" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:9999;">
<p>⚠️ 这是一个带圆角的警告</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button onclick="this.parentElement.style.display='none'">确定</button>
</div>
注意 Safari 和旧版 Edge 的 border-radius 渲染差异
某些浏览器对 overflow: hidden 与 border-radius 组合支持不一致，尤其当弹窗内部有阴影、渐变或子元素超出时：
- 如果圆角被“切掉”，先检查父容器是否漏了
overflow: hidden - Safari 15.4 之前版本对
transform+border-radius同时存在时可能渲染异常，可尝试改用top/left配合margin居中 - 避免在
border-radius容器内使用backdrop-filter: blur()，部分安卓 WebView 会直接失效
别忘了语义化和无障碍支持
纯视觉圆角只是表象，实际项目中容易忽略的是可访问性：
- 用
role="alertdialog"标明用途 - 弹出时用
document.getElementById('alert-box').setAttribute('aria-hidden', 'false')并聚焦到确认按钮 - 按
Esc键应关闭弹窗（监听keydown判断event.key === 'Escape'） - 不要只依赖圆角传达“警告”含义——颜色（如橙色边框）、图标、
aria-label才是关键
圆角本身不传递语义，它只是视觉修饰；真正影响可用性的，是焦点管理、键盘操作路径和屏幕阅读器播报逻辑。
