背景过滤器超出边界半径答案

【问题标题】：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>

【问题讨论】：

标签： html css filter border

【解决方案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 效果。