背景滤镜模糊无法在 Safari 上正确渲染

Question

在 Safari（移动版和桌面版）中预览我的网站时，

backdrop-filter: blur();

出现奇怪的渲染问题。我将 PostCSS 与

autoprefixer

插件一起使用，因此代码会生成

backdrop-filter

相应的供应商前缀。我通过检查

build

目录并使用 Safari 中的开发人员工具验证了这一点。

左图为Chrome/Firefox，右图为Safari

这是导致此问题的 HTML/CSS 片段：

    .border {
        --blur: 20px;
        --margin: 10px;
        backdrop-filter: blur(var(--blur));
        width: calc(100vw - var(--margin) * 2);
        height: calc(100vh - var(--margin) * 2);
        margin: var(--margin);
        border-image: url('data:image/svg+xml,<svg width="261" height="261" viewBox="0 0 261 261" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_182_2783)"><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="251" y1="180.75" x2="231" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="181.25" x2="231" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="80.75" x2="231" y2="80.75" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line x1="10" y1="80.25" x2="30" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="79.75" x2="30" y2="79.75" stroke="%23666666" stroke-width="0.5"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line x1="10" y1="180.75" x2="30" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="181.25" x2="30" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="120.5" y1="20" x2="120.5" y2="30" stroke="%23666666"/><line x1="110.5" y1="20" x2="110.5" y2="30" stroke="%23666666"/><line x1="100.5" y1="20" x2="100.5" y2="30" stroke="%23666666"/><line x1="90.5" y1="20" x2="90.5" y2="30" stroke="%23666666"/><line x1="70.5" y1="20" x2="70.5" y2="30" stroke="%23666666"/><line x1="60.5" y1="20" x2="60.5" y2="30" stroke="%23666666"/><line x1="50.5" y1="20" x2="50.5" y2="30" stroke="%23666666"/><line x1="40.5" y1="20" x2="40.5" y2="30" stroke="%23666666"/><line x1="80.25" y1="10" x2="80.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="10" x2="79.75" y2="30" stroke="%23666666" stroke-width="0.5"/><path d="M30.5 0L30.5 30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="220.5" y1="20" x2="220.5" y2="30" stroke="%23666666"/><line x1="210.5" y1="20" x2="210.5" y2="30" stroke="%23666666"/><line x1="200.5" y1="20" x2="200.5" y2="30" stroke="%23666666"/><line x1="190.5" y1="20" x2="190.5" y2="30" stroke="%23666666"/><line x1="170.5" y1="20" x2="170.5" y2="30" stroke="%23666666"/><line x1="160.5" y1="20" x2="160.5" y2="30" stroke="%23666666"/><line x1="150.5" y1="20" x2="150.5" y2="30" stroke="%23666666"/><line x1="140.5" y1="20" x2="140.5" y2="30" stroke="%23666666"/><line x1="180.75" y1="10" x2="180.75" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="10" x2="181.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="125" y1="130.5" x2="130" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="136" x2="130.5" y2="131" stroke="%23666666"/><line x1="136" y1="130.5" x2="131" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="125" x2="130.5" y2="130" stroke="%23666666"/><line x1="30.5" y1="261" x2="30.5" y2="231" stroke="%23666666"/><line x1="40.5" y1="241" x2="40.5" y2="231" stroke="%23666666"/><line x1="50.5" y1="241" x2="50.5" y2="231" stroke="%23666666"/><line x1="60.5" y1="241" x2="60.5" y2="231" stroke="%23666666"/><line x1="70.5" y1="241" x2="70.5" y2="231" stroke="%23666666"/><line x1="90.5" y1="241" x2="90.5" y2="231" stroke="%23666666"/><line x1="100.5" y1="241" x2="100.5" y2="231" stroke="%23666666"/><line x1="110.5" y1="241" x2="110.5" y2="231" stroke="%23666666"/><line x1="120.5" y1="241" x2="120.5" y2="231" stroke="%23666666"/><line x1="80.25" y1="251" x2="80.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="251" x2="79.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="140.5" y1="241" x2="140.5" y2="231" stroke="%23666666"/><line x1="150.5" y1="241" x2="150.5" y2="231" stroke="%23666666"/><line x1="160.5" y1="241" x2="160.5" y2="231" stroke="%23666666"/><line x1="170.5" y1="241" x2="170.5" y2="231" stroke="%23666666"/><line x1="190.5" y1="241" x2="190.5" y2="231" stroke="%23666666"/><line x1="200.5" y1="241" x2="200.5" y2="231" stroke="%23666666"/><line x1="210.5" y1="241" x2="210.5" y2="231" stroke="%23666666"/><line x1="220.5" y1="241" x2="220.5" y2="231" stroke="%23666666"/><line x1="180.75" y1="251" x2="180.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="251" x2="181.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/></g><defs><clipPath id="clip0_182_2783"><rect width="261" height="261" fill="white"/></clipPath></defs></svg>') 80 fill / 80px round;
        padding: 60px;

        & div {
            width: 100%;
            height: 100%;

            /* Temporary styles */
            display: grid;
            place-items: center;

            &::before {
                --transition: 35%;
                --opacity: 50%;
                content: '';
                position: absolute;
                inset: 0;
                z-index: -1;
                backdrop-filter: blur(var(--blur));
                mask-image: linear-gradient(to top, black var(--transition), transparent 100%);
            }
        }
    }

<div class="border">
    <div>
        <h1>Hello World!</h1>
    <div>
</div>

很难查明问题和/或更改 CSS 以消除我试图创建的背景渐变模糊效果。

我的一些初步测试让我相信这要么是

::before

伪类、

z-index: -1;

或

blur()

本身的问题。

Answer 1

一些问题：

HTML：内部 div 未正确关闭。这可能是可以原谅的，也可能会完全搞乱你的布局。
您不需要在
```
backdrop-filter
```
上使用
```
.border
```
，因为它在 Safari 18.2 中呈现为奇怪的灰色背景，并在
```
+
```
标记周围有圆圈。
```
z-index:-1
```
上的
```
::before
```
将其设置在 Safari 中的
```
.border
```
后面，除了上面提到的效果外，它没有任何视觉效果。

所以我这样改变了你的代码：

* {
  box-sizing: border-box;
}

.border {
  --blur: 20px;
  --margin: 10px;
  width: calc(100vw - var(--margin) * 2);
  height: calc(100vh - var(--margin) * 2);
  margin: var(--margin);
  padding: 60px;
  border-image: url('data:image/svg+xml,<svg width="261" height="261" viewBox="0 0 261 261" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_182_2783)"><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="230.5" x2="231" y2="230.5" stroke="%23666666"/><line x1="241" y1="220.5" x2="231" y2="220.5" stroke="%23666666"/><line x1="241" y1="210.5" x2="231" y2="210.5" stroke="%23666666"/><line x1="241" y1="200.5" x2="231" y2="200.5" stroke="%23666666"/><line x1="241" y1="190.5" x2="231" y2="190.5" stroke="%23666666"/><line x1="241" y1="170.5" x2="231" y2="170.5" stroke="%23666666"/><line x1="241" y1="160.5" x2="231" y2="160.5" stroke="%23666666"/><line x1="241" y1="150.5" x2="231" y2="150.5" stroke="%23666666"/><line x1="241" y1="140.5" x2="231" y2="140.5" stroke="%23666666"/><line x1="251" y1="180.75" x2="231" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="181.25" x2="231" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line x1="261" y1="130.5" x2="231" y2="130.5" stroke="%23666666"/><line x1="241" y1="120.5" x2="231" y2="120.5" stroke="%23666666"/><line x1="241" y1="110.5" x2="231" y2="110.5" stroke="%23666666"/><line x1="241" y1="100.5" x2="231" y2="100.5" stroke="%23666666"/><line x1="241" y1="90.5" x2="231" y2="90.5" stroke="%23666666"/><line x1="241" y1="70.5" x2="231" y2="70.5" stroke="%23666666"/><line x1="241" y1="60.5" x2="231" y2="60.5" stroke="%23666666"/><line x1="241" y1="50.5" x2="231" y2="50.5" stroke="%23666666"/><line x1="241" y1="40.5" x2="231" y2="40.5" stroke="%23666666"/><line x1="251" y1="80.25" x2="231" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="251" y1="80.75" x2="231" y2="80.75" stroke="%23666666" stroke-width="0.5"/><line x1="261" y1="30.5" x2="231" y2="30.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="30.5" x2="30" y2="30.5" stroke="%23666666"/><line x1="20" y1="40.5" x2="30" y2="40.5" stroke="%23666666"/><line x1="20" y1="50.5" x2="30" y2="50.5" stroke="%23666666"/><line x1="20" y1="60.5" x2="30" y2="60.5" stroke="%23666666"/><line x1="20" y1="70.5" x2="30" y2="70.5" stroke="%23666666"/><line x1="20" y1="90.5" x2="30" y2="90.5" stroke="%23666666"/><line x1="20" y1="100.5" x2="30" y2="100.5" stroke="%23666666"/><line x1="20" y1="110.5" x2="30" y2="110.5" stroke="%23666666"/><line x1="20" y1="120.5" x2="30" y2="120.5" stroke="%23666666"/><line x1="10" y1="80.25" x2="30" y2="80.25" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="79.75" x2="30" y2="79.75" stroke="%23666666" stroke-width="0.5"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="130.5" x2="30" y2="130.5" stroke="%23666666"/><line x1="20" y1="140.5" x2="30" y2="140.5" stroke="%23666666"/><line x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/><line x1="20" y1="160.5" x2="30" y2="160.5" stroke="%23666666"/><line x1="20" y1="170.5" x2="30" y2="170.5" stroke="%23666666"/><line x1="20" y1="190.5" x2="30" y2="190.5" stroke="%23666666"/><line x1="20" y1="200.5" x2="30" y2="200.5" stroke="%23666666"/><line x1="20" y1="210.5" x2="30" y2="210.5" stroke="%23666666"/><line x1="20" y1="220.5" x2="30" y2="220.5" stroke="%23666666"/><line x1="10" y1="180.75" x2="30" y2="180.75" stroke="%23666666" stroke-width="0.5"/><line x1="10" y1="181.25" x2="30" y2="181.25" stroke="%23666666" stroke-width="0.5"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line y1="230.5" x2="30" y2="230.5" stroke="%23666666"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="120.5" y1="20" x2="120.5" y2="30" stroke="%23666666"/><line x1="110.5" y1="20" x2="110.5" y2="30" stroke="%23666666"/><line x1="100.5" y1="20" x2="100.5" y2="30" stroke="%23666666"/><line x1="90.5" y1="20" x2="90.5" y2="30" stroke="%23666666"/><line x1="70.5" y1="20" x2="70.5" y2="30" stroke="%23666666"/><line x1="60.5" y1="20" x2="60.5" y2="30" stroke="%23666666"/><line x1="50.5" y1="20" x2="50.5" y2="30" stroke="%23666666"/><line x1="40.5" y1="20" x2="40.5" y2="30" stroke="%23666666"/><line x1="80.25" y1="10" x2="80.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="10" x2="79.75" y2="30" stroke="%23666666" stroke-width="0.5"/><path d="M30.5 0L30.5 30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="220.5" y1="20" x2="220.5" y2="30" stroke="%23666666"/><line x1="210.5" y1="20" x2="210.5" y2="30" stroke="%23666666"/><line x1="200.5" y1="20" x2="200.5" y2="30" stroke="%23666666"/><line x1="190.5" y1="20" x2="190.5" y2="30" stroke="%23666666"/><line x1="170.5" y1="20" x2="170.5" y2="30" stroke="%23666666"/><line x1="160.5" y1="20" x2="160.5" y2="30" stroke="%23666666"/><line x1="150.5" y1="20" x2="150.5" y2="30" stroke="%23666666"/><line x1="140.5" y1="20" x2="140.5" y2="30" stroke="%23666666"/><line x1="180.75" y1="10" x2="180.75" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="10" x2="181.25" y2="30" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="2.18557e-08" x2="130.5" y2="30" stroke="%23666666"/><line x1="230.5" y1="2.18557e-08" x2="230.5" y2="30" stroke="%23666666"/><line x1="125" y1="130.5" x2="130" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="136" x2="130.5" y2="131" stroke="%23666666"/><line x1="136" y1="130.5" x2="131" y2="130.5" stroke="%23666666"/><line x1="130.5" y1="125" x2="130.5" y2="130" stroke="%23666666"/><line x1="30.5" y1="261" x2="30.5" y2="231" stroke="%23666666"/><line x1="40.5" y1="241" x2="40.5" y2="231" stroke="%23666666"/><line x1="50.5" y1="241" x2="50.5" y2="231" stroke="%23666666"/><line x1="60.5" y1="241" x2="60.5" y2="231" stroke="%23666666"/><line x1="70.5" y1="241" x2="70.5" y2="231" stroke="%23666666"/><line x1="90.5" y1="241" x2="90.5" y2="231" stroke="%23666666"/><line x1="100.5" y1="241" x2="100.5" y2="231" stroke="%23666666"/><line x1="110.5" y1="241" x2="110.5" y2="231" stroke="%23666666"/><line x1="120.5" y1="241" x2="120.5" y2="231" stroke="%23666666"/><line x1="80.25" y1="251" x2="80.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="79.75" y1="251" x2="79.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="130.5" y1="261" x2="130.5" y2="231" stroke="%23666666"/><line x1="140.5" y1="241" x2="140.5" y2="231" stroke="%23666666"/><line x1="150.5" y1="241" x2="150.5" y2="231" stroke="%23666666"/><line x1="160.5" y1="241" x2="160.5" y2="231" stroke="%23666666"/><line x1="170.5" y1="241" x2="170.5" y2="231" stroke="%23666666"/><line x1="190.5" y1="241" x2="190.5" y2="231" stroke="%23666666"/><line x1="200.5" y1="241" x2="200.5" y2="231" stroke="%23666666"/><line x1="210.5" y1="241" x2="210.5" y2="231" stroke="%23666666"/><line x1="220.5" y1="241" x2="220.5" y2="231" stroke="%23666666"/><line x1="180.75" y1="251" x2="180.75" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="181.25" y1="251" x2="181.25" y2="231" stroke="%23666666" stroke-width="0.5"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/><line x1="230.5" y1="261" x2="230.5" y2="231" stroke="%23666666"/></g><defs><clipPath id="clip0_182_2783"><rect width="261" height="261" fill="white"/></clipPath></defs></svg>') 80 fill / 80px round;


  &::before {
    --transition: 35%;
    --opacity: 50%;
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(var(--blur));
    mask-image: linear-gradient(to top, black var(--transition), transparent 100%);
  }

  & div {
    position: relative;
    width: 100%;
    height: 100%;

    /* Temporary styles */
    display: grid;
    place-items: center;

  }
}

<div class="border">
  <div>
    <h1>Hello World!</h1>
  </div>
</div>

背景滤镜模糊无法在 Safari 上正确渲染

问题描述投票：0回答：1

1个回答

最新问题

背景滤镜模糊无法在 Safari 上正确渲染

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1