css模糊羽化

在逛 codepen 的时候发现一个有意思的 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 也可以实现，只不过觉得这种实现方式思路新奇，特此记录 📝。