Question

我尝试在chrome中添加future-property backdrop-filter：

.glass {
    --webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); /* chrome */
}

在chrome://flags/#enable-experimental-web-platform-features中激活后，它终于有效，但是，我得到一个黑色边框。有人知道如何删除那个边界??

修改

没有零数据错误或其他东西（使用SO页面测试）：

如果我采用3px代替10px边框较小，但不会离开：

Here is a fiddle但更好的是，你将它复制到本地，因为在例子中也是正确的boder。然后它看起来像这样：

Answer 1

这是由Chrome中的错误引起的，如上面的评论所述，目前无法修复。

稍微有点乱，你可以稍微欺骗它，但它的表现并不完全正确。

This Fiddle是我的众多尝试之一，但它只能缓解这个问题。你不能完全解决它。通过仔细控制效果开始和结束的位置，您可以避免在窗口范围之外读取铬并混合黑色，最后以几个像素为代价。

    .frontcontainer{
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .front1{
        position: relative;
        right: 3px;
        width: calc(100% - 6px);
        backdrop-filter: blur(3px);
    }

我还尝试将div叠加在一起，并使用更轻的模糊边缘，这可能有效，但不是100％正确，但分层背景模糊不能正确或一致地进行交互。

Answer 2

我使用的是filter而不是backdrop-filter，但它可能不是您想要的那样，但它会像预期的那样模糊文本，就像chrome中的错误报告一样可能仍然存在，http://localhost:4985/_admin/db/test/users帖子中描述backdrop-filter。

body{margin:0;}
    
        .front{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 20px;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
        
        .back {
            margin: 20px;
        }

<body>
    
    <div class="front">
        <p> this is in the front </p>
    
    </div>
    
    <div class="back">
    <p> this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back </p>
    </div>
    
    
</body>

这会模糊前方，但在我的下一个例子中，我有：this

Answer 3

我不知道您是否仍在尝试解决此问题，但是我通过使用嵌入式白色阴影在某种程度上隐藏了黑色模糊来解决了这个问题。

因此对于窗口底部的栏，我有以下内容：

backdrop-filter: blur(2px);
box-shadow:
    inset 3px -2px 5px rgba(255,255,255,0.6),
    inset -3px -2px 5px rgba(255,255,255,0.6);

这并不完美，但它几乎掩盖了由Chrome渲染错误引起的黑光。

当然这是特定于Chrome的，您不希望在其他没有此错误的浏览器中出现白色的阴影。

镀铬背景滤镜有黑色边框

3 个答案: