背景过滤器超出边界半径
Posted
技术标签:
【中文标题】背景过滤器超出边界半径【英文标题】：Backdrop Filter extends beyond Border Radius 【发布时间】：2016-07-22 13:40:19 【问题描述】：我正在尝试同时使用 CSS backdrop-filter 和 border-radius，但背景滤镜似乎超出了边框半径。
body
background-attachment: fixed;
background-color: #541B84;
background-image: url("https://source.unsplash.com/random");
background-position: 50% 50%;
background-size: cover;
height: 100%;
width: 100%;
.con
-webkit-backdrop-filter: blur(1rem) saturate(200%);
backdrop-filter: blur(1rem) saturate(200%);
background: rgba(247, 247, 249, 0.8);
border-radius: 100%;
font-size: 7rem;
font-weight: 300;
height: 11rem;
line-height: 1.5;
margin: 1rem auto;
width: 11rem;
text-align: center;
<body>
<div class="con">KM</div>
</body>【问题讨论】：
【参考方案1】：你刚刚发现了一个错误！
这是 WebKit 实现 backdrop-filter CSS 属性的 bug。它不考虑过滤器的 border-radius 分隔 - 即使使用 overflow: hidden; 时也不考虑。
clip-path 或几乎所有使用 backdrop-filter 应用于元素的掩蔽属性也是如此，截至 2016 年 5 月 21 日，它在最新的 WebKit Nightly Build 中仍未解决。
虽然这个问题没有解决，但您有三个选择：
等待修复实现该功能。 无论如何都要实现有缺陷的功能，因为这不是您的代码的问题。 改用javascript。如果这个问题不太明显（即border-radius: 5px;），我会坚持使用第二个选项，并且当错误变得非常明显时（比如在你的 sn-p 中）完全避免使用它。
这是 WebKit Bugzilla 上的错误报告：https://bugs.webkit.org/show_bug.cgi?id=142662
编辑：
自发布补丁以来，Webkit Bugzilla 错误报告已于 2016/05/25 关闭。在最新的 webkit nightly build 中可以看到更正。 ;)
【讨论】：
我刚遇到这个问题，它已在 Safari Technology Preview 6 中修复。 @AsaCarter 好！您是否在最新的稳定 Safari 更新上对其进行了测试？ 在 Chrome 71.0.3578.98 上仍然是一个 bug：bugs.chromium.org/p/chromium/issues/detail?id=547937【参考方案2】：在此修复发布之前，您可以通过在父元素上使用 0px 模糊作为背景过滤器来避免此错误。这需要隐藏溢出，因此您的示例中的 K 和 M 的边缘不再可见。
body
background: url("https://source.unsplash.com/random") center /cover;
height: 100%;
width: 100%;
.con
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
margin: 1rem auto;
width: 11rem;
height: 11rem;
overflow: hidden;
border-radius: 50%;
font-size: 7rem;
font-weight: 300;
line-height: 1.5;
text-align: center;
position: relative;
.inner
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-backdrop-filter: blur(0.1em);
backdrop-filter: blur(0.1em);
border-radius: 50%;
margin: -1px;
<body>
<div class="con">
<div class="inner">KM</div>
</div>
</body>【讨论】：
这似乎不起作用，它只会完全禁用blur 效果。以上是关于背景过滤器超出边界半径的主要内容，如果未能解决你的问题，请参考以下文章