模糊不适用于绝对内部绝对模糊

Question

我不知道当我在绝对div上设置blur时会发生什么，在绝对div blur内部。

https://codepen.io/dalwick/pen/PoaoJOe

<div class="container">
<div class="content">
<div class="absolute-inside-absolute">
</div>
</div>
</div>

.container{
width: 100px;
height: 100px;
background: red;
z-index: 100;
position: relative;
}
.content {
width: 100px;
height: 100px;
left: 50px;
top: 50px;
position: absolute;
background: linear-gradient(transparent, blue);
z-index: 200;
backdrop-filter: blur(70px);
}
.absolute-inside-absolute{
width: 50px;
height: 50px;
left: -20px;
top: -20px;
z-index: 300;
background: linear-gradient(green, transparent);
position: absolute;
backdrop-filter: blur(70px);
}

当您在第三个div上切换blur时，第二个div上的blur被禁用

Answer 1

box-shadow: 0 4px 30px rgba(0, 0, 0,       0.1);

背景滤镜：模糊(5px(；-webkit背景滤镜：模糊(5px(；

你可以试试以上的代码