记录--CSS 如何实现羽化效果？
Posted 林恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录--CSS 如何实现羽化效果？相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
最近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下
为了解决这个问题，设计师提了一个“究极”方案，将书名背后的图片模糊一下，这个在 CSS 中很好实现，仅需backdrop-filter即可
.name backdrop-filter: blur(10px);
当然，现在模糊是模糊了，但是边缘过于“断层”，导致书名和封面有些“格格不入”，效果如下
如果能够将边缘羽化一下，虚化边缘效果，就可以很好地将书名融入到背景当中
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具
这是设计最终羽化后的效果，既能保证文字清晰可见，又能避免太过突兀，如下
设计师实现这个很简单，用橡皮擦擦一下就可以了，那么 CSS 呢？下面来探讨一下 CSS 如何实现羽化的效果。
一、羽化的原理
羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。
关于遮罩，这里简单介绍一下，基本语法很简单，和background的语法基本一致
.content -webkit-mask: \'遮罩图片\' ; /*完整语法*/ .content -webkit-mask: \'遮罩图片\' [position] / [size] ;
这里的遮罩图片和背景的使用方式基本一致，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。
遮罩的原理很简单，最终效果只显示不透明的部分，透明部分将不可见，半透明类推
先举个圆形的例子，这个比较简单，因为可以直接通过径向渐变创建
比如，下面有一个头像，现在直接放在背景上非常突兀
我们可以将这个头像通过径向渐变绘制出了一个从不透明到透明的遮罩，达到和背景融合的效果
.head -webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
原理是这样的
最后效果如下
当然这是圆形的，如果是矩形的呢？
二、矩形的羽化原理
根据上面的分析，如果希望羽化矩形边缘，需要创建这一个遮罩
那么问题来了，如何创建这一个边缘模糊的矩形呢？貌似没办法直接通过渐变来实现，而且还需要是尺寸自适应的（自动跟随容器尺寸）
如果单纯看这样一个矩形，还是很容易实现的，通过box-shadow即可实现
.shadow width: 200px; height: 200px; background:black; border-radius:10px; box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
根据需求，可以多叠加几层box-shadow，这里叠加了3层，效果如下
但是问题又来了，这样一个 dom 无法直接用作mask-image，那如何处理呢？
三、通过 SVG foreignObject 转换成图片
上面提到，通过 CSS 阴影可以很轻松的实现我们说需要的效果，但可惜现在还是 dom 阶段，所以需要将这个 dom 转换成图像。
在这里，需要借助 SVG 中的foreignObject元素，通过这个元素，可以将 HTML嵌入到SVG中，轻松实现 dom 转图片的效果
有兴趣的可以参考之前这几篇文章
- CSS、SVG、Canvas对特殊字体的绘制与导出
- CSS & SVG foreignObject 实现文字镂空波浪动画
原理如下
回到这里，我们仅需要将上面的结果放到foreignObject元素中，由于需要自适应尺寸，这里的body宽高都是100%，如下
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject >
<body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
<style>
.wrap
box-sizing: border-box;
margin: 0;
height: 100%;
padding: 10px;
.shadow
height: 100%;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
</style>
<div class="shadow"></div>
</body>
</foreignObject>
</svg>
这样就得到了一个宽高自适应的SVG图像，无论宽高怎么变化，都是撑满的
别看这么多标签，这其实已经是一张图片，可以直接使用，接下来看看如何运用
四、矩形的羽化
其实上面得到的 SVG可以直接当成一个图片资源，正常使用了，就像这样
.name -webkit-mask: url(\'./fearher.svg\')
不过，也可以将这个SVG图片转换成内联形式，减少资源依赖，转换后仍然保持自适应特性
这里推荐张鑫旭老师的SVG在线压缩合并工具
转换后就是这个样子
.name
-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:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class=\'shadow\'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E")
效果如下
而且由于尺寸是动态的，换个书名也能完美适应
最后再来对比一下，下面哪个一眼看上去效果最好？
完整代码可以查看以下任意链接
本文转载于:
https://juejin.cn/post/7176094306124431421
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录：CSS3 模糊效果
参考技术A最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px); 即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
以上是关于记录--CSS 如何实现羽化效果？的主要内容，如果未能解决你的问题，请参考以下文章