关于css的mask属性，如何做一个带边框的镂空效果？

Question

如上图，是利用了镂空效果显示下面的图片，但是我想要的镂空效果是沿着不规则图形有一个边框效果，类似如下，五角星最外一层有一个红色的border。

代码示例如下：
https://jsbin.com/fazufer/edit?html,css,output

请问有实现过类似效果的吗？

带有红色边框的五角星图片：

Answer 1

大概可以参考我之前的一篇笔记 👉 CSS 中的遮罩属性 mask/masks 。
至于你需求的红色边框，可以参考我笔记里面实现的阴影，一样用 filter: drop-shadow() 来实现，只不过需要调整一下模糊半径和扩展半径。

drop-shadow() - CSS：层叠样式表 | MDN

---

Edit 10/16/2023

我记错了，filter: drop-shadow() 的扩散半径（spread-radius）值各浏览器并没有是实现。因为最近一直用的 firefox 作为主力开发浏览器，所以在看到MDN关于这部分的介绍时以为只有 firefox 没有支持（其实这些浏览器都不支持）。

以及一张简单模拟的效果:

如果扩展半径参数可以被应用上的话，就可以和 box-shadow 一样使用阴影来模拟边框了。

Answer 2

如果你是用 mask，并且是使用了一整图片的话，那么你要看到什么效果，完全取决于你的图片啊。

只要图片黑色的部分和白色的部分控制好，最终 mask 展示出来的内容不就是你想要的内容吗？