背景滤镜忽略最前面堆叠元素上的模糊值

Question

下面代码段中最小的最里面的圆圈有一个未应用的backdrop-filter模糊10rem。看起来span元素从其父元素继承了完全相同的模糊量，而不是采用应该应用的更高值。知道为什么和/或有任何已知的解决方案吗？

* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html, body, section {
height: 100%;
}
section, div, span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-image: 
url(
'https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif'
);
background-size: cover;
background-position: center;
}
div, span {
border-radius: 50%;
width: 10rem; height: 10rem;
background-color: rgba( 80%,100%,90%,0.1 );
background-image: none;
backdrop-filter: blur( 0.375rem );
-webkit-backdrop-filter: blur( 0.375rem );  
}
span {
width: 5rem; height: 5rem;
backdrop-filter: blur( 10rem ); /* this gets ignored */
-webkit-backdrop-filter: blur( 10rem ); /* 10rem blur isn't applied, why? */
}

<section> <div> <span></span> </div> </section>

CCD_ 4模糊将比在该示例中看到的更模糊最里面的圆。我正在Chrome浏览器中查看此内容。

这里的总体目标是使最里面的圆圈比它里面的div更模糊。我该如何做到这一点

Answer 1

不要嵌套元素，将它们分开。

这里有另一个想法来实现你想要的

body{
margin:0;
}
section {
display: grid;
height: 100vh;
background-image: url('https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif');
background-size: cover;
background-position: center;
}
section * {
border-radius: 50%;
grid-area:1/1; /* make both overlap */
margin:auto; /* and center them */
width: 10rem;
height: 10rem;
background-color: rgba( 80%, 100%, 90%, 0.1);
backdrop-filter: blur( 0.375rem);
-webkit-backdrop-filter: blur( 0.375rem);
}
section div {
/* make a hole in the div for the span */
-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5rem),#000 0);
}
section span {
width: 5rem;
height: 5rem;
backdrop-filter: blur( 2rem);
-webkit-backdrop-filter: blur( 2rem);
}

<section>
<div>  </div>
<span></span>
</section>