欢迎关注我的公众号：前端大神最近遇到这样一个问题，书名直接显示在封面上，可能会出现书名看不清楚的情况（容易被背景干扰），如下为了解决这个问题，设计师提出了一个“极端”的解决方案，就是把书名后面的图片模糊掉。这个在css中很容易实现，只需要一个backdrop-filter.name{backdrop-filter:blur(10px);}当然现在blur模糊了，但是边缘太“断层”了，造成title和cover变得“不合时宜”。效果如下如果可以羽化边缘和虚化边缘效果，就可以将标题混合成Featheringintothebackground是photoshop的术语。羽化的原理是模糊选中区域内外的连接，起到渐变的作用，达到自然的连接效果。是PS等版本处理图片的重要工具。这是最后羽化后的设计效果，既能保证文字清晰可见，又能避免过于突兀。下面的设计师要实现这个很简单，用橡皮擦一下就可以了。CSS呢？下面我们来探讨一下CSS是如何实现羽化效果的。1、羽化原理Feathering其实就是模糊边缘。在CSS中，它实际上是创建一个边缘模糊的蒙版，即需要半透明的渐变。关于面膜，这里简单介绍一下。基本语法很简单，和后台语法基本一致。Maskimage'[position]/[size];}这里的maskimage基本和背景一样使用。它可以是PNG图像、SVG图像或渐变绘制的图像。它还支持多图像叠加。遮蔽的原理很简单。最终效果只显示不透明部分，透明部分将不可见。让我们用半透明类比来举一个圆形的例子。这个比较简单，因为可以直接通过径向渐变来创建。比如下面有个头像，现在直接放在背景上很突兀。我们可以通过径向渐变绘制这个头像，绘制一个从不透明到透明的蒙版，达到与背景融合的效果。head{-webkit-mask:radial-gradient(closest-sidecircle,#00060%,transparent100%);}原理是最终效果如下当然这是一个圆，如果是矩形呢？2.矩形的羽化原理根据上面的分析，如果要对矩形的边缘进行羽化，就需要创建这个mask。那么问题来了，如何创建这个边缘模糊的矩形呢？好像没办法直接通过gradients来实现，还需要size-adaptive（自动跟随容器大小）。如果单纯看这样一个矩形，还是很容易实现的。可以通过box-shadow.shadow{width:200px;来实现高度：200px；背景：黑色；边界半径：10px；box-shadow:005pxblack,0010pxblack,0015pxblack}根据需要可以多加几层box-shadow，这里是3层，效果如下但是问题又来了，这样的dom不能直接作为mask-image，那么怎么处理呢？3.将SVGforeignObject转为图片上面说了CSS阴影可以很轻松的达到想要的效果，可惜现在还停留在dom阶段，所以需要将这个dom转为图片。在这里，您需要使用SVG中的foreignObject元素。通过该元素，可以将HTML嵌入到SVG中，轻松实现dom转图片的效果。有兴趣的可以参考之前的文章绘制特殊字体的CSS、SVG和Canvas。导出CSS&SVGforeignObject实现文字空心波浪动画原理如下回到这里，我们只需要将上面的结果放到foreignObject元素中即可，因为需要自适应大小，这里body的宽高都是100%，如下所示://www.w3.org/1999/xhtml">
