popover 属性不触发 ::backdrop，仅 的 showmodal() 和 requestfullscreen() 会生成该伪元素；若需模糊遮罩，应改用 并配合 backdrop-filter， popover 需手动实现遮罩层。
popover 属性本身不触发 ::backdrop，这是最容易踩的坑——它和 <dialog></dialog> 的 showModal() 有本质区别。
popover 不会生成 ::backdrop，别白费劲写样式
当你给一个元素加上 popover 属性（比如 <div popover>），浏览器不会自动插入 <code>::backdrop 层。它只控制该元素是否作为“原生弹层”显示，并不创建遮罩层。所有你写的 div[popover]::backdrop 或 button[popover]::backdrop 都不会生效，CSS 会被静默忽略。
原因很简单：::backdrop 只在两种场景下由浏览器自动生成：
-
<dialog></dialog>调用showModal()时 - 元素调用
requestFullscreen()进入全屏时
popover 元素始终处于页面常规层叠上下文中，没有“背后遮罩”的语义，所以没有 ::backdrop。
想用 backdrop-filter 做模糊遮罩？改用 dialog + showModal()
如果你的目标是实现带模糊背景的模态层（比如登录弹窗、设置面板），<dialog></dialog> 是唯一能天然配合 ::backdrop 的 HTML 元素。直接替换掉 popover 方案：
- 把
<div popover>...</div>改成<dialog>...</dialog> - 用
dialogEl.showModal()替代element.showPopover() - 然后就能安全写
dialog::backdrop { backdrop-filter: blur(8px); background-color: rgba(0,0,0,0.4); }
注意：Safari 15.4+ 才完整支持 showModal() 和 ::backdrop；旧版 Safari 或安卓 WebView 需 fallback，比如加一层 <div class="backdrop"> 并手动控制显隐。
<h3>popover 的遮罩必须手写，且不能靠 ::backdrop</h3>
<p>如果非要用 <code>popover（比如需要轻量级、非阻断式浮层），遮罩层得你自己加 DOM：
- 放一个
<div class="popover-backdrop"> 在 <code>里，紧跟在<dialog></dialog>后面或用 JS 动态插入 - 设
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; - 背景用
background-color: rgba(0,0,0,0.5)，如需模糊，得套一层父容器并用filter: blur(8px)（但注意：这会模糊整个页面，不是“背后内容”，慎用） - 点击遮罩关闭 popover：监听
click事件，检查event.target === backdropEl，再调element.hidePopover() - Firefox 会静默忽略该属性，
@supports返回true但实际无效果 - Safari 15.3 及更早版本压根不识别
::backdrop
这种方案无法复用 backdrop-filter 的局部模糊能力，因为 filter 作用于自身及其子树，而 backdrop-filter 只作用于“背后”的内容层——后者必须依赖浏览器自动生成的合成层，也就是 ::backdrop。
Firefox 和旧 Safari 对 backdrop-filter 的兼容性要主动降级
即使你用了 <dialog></dialog> + showModal()，backdrop-filter 在 Firefox（默认禁用）和 Safari ≤15.3 中仍不工作。不能只靠 @supports (backdrop-filter: blur(1px)) 检测：
稳妥做法是提供两套样式：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
@supports (backdrop-filter: blur(1px)) {
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
}
关键点在于：降级后的 background-color 透明度要略高（比如 rgba(0,0,0,0.5)），否则 fallback 下遮罩太淡，视觉上失去“阻断感”。
真正容易被忽略的是：popover 和 backdrop 的组合根本不存在。想省事又想要模糊遮罩，就老实用 <dialog></dialog>；想用 popover，就得接受它没有遮罩层这个事实——所有“popover + backdrop”相关的代码，本质上都是误用。
