backdrop-filter 与 border-radius 渲染顺序冲突导致圆角漏光，本质是模糊先在矩形区域完整绘制并溢出，border-radius 和 clip-path 均属后置裁剪无法约束溢出光晕；终极解法是用 CSS mask 对 backdrop-filter 作用前的背景内容进行预裁剪，且 mask 必须直接作用于启用 backdrop-filter 的同一元素。
backdrop-filter 与 border-radius 渲染顺序冲突
这不是 bug，而是浏览器渲染流水线的固有行为：backdrop-filter 的模糊效果会先在整个矩形边界内完整绘制（含像素溢出），border-radius 再对元素自身做几何裁剪——它只裁内容，不裁已经画好的模糊光晕。结果就是圆角边缘出现“漏光”，看起来像圆角没生效。
clip-path 也无法解决圆角漏光
很多人试过 clip-path: inset(0 round 12px)，但一样失败。原因相同：它也是后置裁剪，作用时机晚于 backdrop-filter 的像素采样与绘制阶段。只要裁剪发生在滤镜输出之后，就无法约束那圈向外扩散的模糊边缘。
真正有效的解法是 CSS mask 预裁剪
必须在模糊发生前就限定采样区域。用 mask 把背景内容“框”进圆角形状里，再让 backdrop-filter 对这个预裁剪后的图像做处理：
.glass {
border-radius: 12px;
-webkit-mask: radial-gradient(circle at center, #000 0%, #000 100%);
mask: radial-gradient(circle at center, #000 0%, #000 100%);
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.08);
}
-
mask必须用纯黑/透明渐变或 SVG 路径，不能用图片或带 alpha 的颜色值 - 别和
background-clip混用，两者逻辑不同；mask是图像级遮罩，background-clip只管背景绘制范围 - Firefox 对
mask支持较稳，但 Safari 需确保 mask 元素没有overflow: hidden干扰采样
容易被忽略的细节：mask 和 backdrop-filter 必须同层作用
如果把 mask 加在父容器上，而 backdrop-filter 在子元素上，漏光依然存在——mask 必须直接作用于启用 backdrop-filter 的那个元素本身。另外，任何触发合成层隔离的属性（比如 will-change: transform 或 opacity）都可能让 mask 失效，这类干扰项得一并排查。
立即学习“前端免费学习笔记（深入）”；
