关于css的mask属性，如何做一个带边框的镂空效果？-灵析社区
雾里 如上图，是利用了镂空效果显示下面的图片，但是我想要的镂空效果是沿着不规则图形有一个边框效果，类似如下，五角星最外一层有一个红色的border。  代码示例如下： [https://jsbin.com/fazufer/edit?html](https://link.segmentfault.com/?enc=yFdRHMpmxwf0wo%2F997OM8w%3D%3D.kvuPRsCPeXxRF%2BWuxYNSg3KXgLqMQXyXjWjcKFflX9tpGsjCrn8FaXIOcmtEzzaL),css,output 请问有实现过类似效果的吗？ 带有红色边框的五角星图片： 
D_Y_大师大概可以参考我之前的一篇笔记 👉 "CSS 中的遮罩属性 mask/masks" (https://link.segmentfault.com/?enc=bRFm7CIfMS3qEqoKjfR7YA%3D%3D.vAhOP9KniEX7lQ93%2ByFhtgLEO95p9ffipPBflQ3o%2BJdLhrMT8GJi9fT3jvj%2F9uMQ)。
至于你需求的红色边框，可以参考我笔记里面实现的阴影，一样用 "filter: drop-shadow()" 来实现，只不过需要调整一下模糊半径和扩展半径。
"drop-shadow() - CSS：层叠样式表 | MDN" (https://link.segmentfault.com/?enc=y3OY95%2BIF7CNZ4guZoHdcw%3D%3D.BbyTl1JTBVR%2BOKUdvnDzFZf8iDFW3j5sR8aUtsL2IRD4A5mnddIr4%2BUn6ulemdHJzBucz73avT7Nt6wmoZgsZE6qlEcPHSH3g%2FLNWLO9uN8%3D)
***
Edit 10/16/2023
我记错了，"filter: drop-shadow()" 的扩散半径（"spread-radius"）值各浏览器并没有是实现。因为最近一直用的
"firefox" 作为主力开发浏览器，所以在看到MDN关于这部分的介绍时以为只有 "firefox" 没有支持（其实这些浏览器都不支持）。
"MDN截图" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/19f5267b332bdd5b32f0528f1ca6a015.png)
以及一张简单模拟的效果:
"drop-shadow 模拟边框效果" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/296722ad761874c07fbd9714caae400e.png)
如果扩展半径参数可以被应用上的话，就可以和 "box-shadow" 一样使用阴影来模拟边框了。
"box-shadow 模拟边框效果" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/1ca2718c1508666335e25e4f7c21da45.png)