在逛 codepen 的时候发现一个有意思的 css 羽化项目
引用站外地址 css羽化 css 羽化

原理是使用了 svg 中的 foreignObject 将 dom 转化为图片来创建一个边缘模糊的遮罩

让原本有backdrop-filter: blur(10px);的元素产生了羽化的效果

核心代码

|------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | .name { position: absolute; bottom: 30px; font-size: 50px; padding: 5px 15px; margin: 0; color: #fff; backdrop-filter: blur(10px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:15px%7D.shadow%7Bheight:100%25;background:black;border-radius:10px;box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black %7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E"); } |

且这么创建出来的羽化效果可以达到自适应。当然我觉得或许可以用 box-shadow 也可以实现，只不过觉得这种实现方式思路新奇，特此记录 📝。