CSS背景过滤器仅用于边框和模糊边框答案

【问题标题】：CSS backdrop-filter for only the border and blurred borderCSS背景过滤器仅用于边框和模糊边框
【发布时间】：2021-10-22 16:55:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

嗨，欢迎来到 SO。请先参观。然后阅读how to ask questions here。之后编辑问题以符合准则并提供minimal reproducible example 以获取调试详细信息。带有代码行的图片是不能接受的！！

标签： html css border blur

【解决方案1】：

我也在搜索类似的东西，发现了一篇有用的文章here。
您可以使用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>

【讨论】：