Question

我正在尝试同时使用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>

Answer 1

你刚刚发现了一个错误！

这是WebKit对bug CSS属性的实现的backdrop-filter。它不会考虑过滤器的border-radius分隔 - 即使使用overflow: hidden;也不会。

同样适用于clip-path或几乎任何使用backdrop-filter应用于元素的屏蔽属性，并且在最新的WebKit Nightly Build中仍未解决，从 2016年5月21日< / em>的

虽然这个问题没有解决，但您有三个选择：

等待修复以实现该功能。

无论如何都要实现错误功能，因为这不是代码的问题。

使用javascript代替。

如果这个问题不太明显（即border-radius: 5px;），我会坚持使用第二个选项，并且当bug变得非常明显时（例如在你的代码片段中），我会完全避免使用它。

以下是WebKit Bugzilla的错误报告：https://bugs.webkit.org/show_bug.cgi?id=142662

修改

Webkit Bugzilla错误报告于2016/05/25关闭，因为补丁已经登陆。在最新的webkit每晚构建中可以看到更正。 ;）

Answer 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>

背景滤镜超出边界半径

2 个答案:

你刚刚发现了一个错误！