html - CSS背景过滤器仅用于边框和模糊边框

Question

我正在尝试实现涉及backdrop-filter元素边界的某些效果。创建一个模糊其背后元素的元素非常简单。但是，我无法弄清楚如何只让backdrop-filter影响元素的边框区域。

使用 CSS 可以实现上述效果。但是，是否有可能获得以下效果：

• 元素的模糊背景和使背景变亮的边框。根据我的尝试，应用backdrop-filter仅影响元素的框，而不影响其子元素的框（例如，添加边框仅用于使过滤区域更大）。下面的例子
• 带有背景滤镜的模糊元素，例如下面
• 带有背景滤镜的模糊边框，例如下面

有点不相关，是否可以使用元素的边框来裁剪背景？如下所示，我尝试使用剪辑路径，但我似乎无法弄清楚如何获得圆形边界区域。

我怀疑这些效果中的大多数目前是不可能的，因为背景过滤器仅适用于给定元素，并且不能与子元素堆叠。

Answer 1

我也在搜索类似的东西，并在这里找到了一篇有用的文章。
您可以使用clipping.
这里

带有背景滤镜的模糊元素

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="5" />
    </filter>
    <mask id="mask">
      <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>

  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)" style="filter: blur(2px)"></image>
</svg>