UI小姐姐坚持我支持在Android系统自定义Webview上实现我们俗称的“毛玻璃”效果。设计的灵魂，我却百般解释，她要，要，要！没办法，研究一段时间！1.backdrop-filter是作弊吗？毛玻璃效果在iOS系统上比较常见，比如消息通知栏、手机助手卡片等，那我们打开苹果官网看看吧！导航栏果然用的是“家族式设计”的“毛玻璃”特效！打开控制台，复制作业：主要用到了backdrop-filterCSS3的属性，所以使用起来很方便。主要卡片CSS代码如下：.card-backdrop-filter{position:relative;z-索引：1；宽度：600px；高度：300px；边界半径：6px；填充：10px；颜色：#fff；字体大小：16px；溢出：隐藏；边距：100px自动；背景滤镜：模糊（10px）；背景色：rgba(255,255,255,0.72)；看手机版的版本，结果不行！！！检查兼容性：backdrop-filter--caiuse[1]。emmm~，而且考虑到我们公司修改的Webview内核的情况。。。需要另辟蹊径，这里补充一下，filter[2]可以理解为滤镜，backdrop-filter是设置滤镜effectforthebackground，目前CSS支持的滤镜效果有：():Inversecoloropacity():Transparencysaturate():Saturationsepia():Brown如果不考虑兼容性，backdrop-filter会在不支持的浏览器上直接显示背景色，即失去设置效果（“体验降级”》）。如果UI小姐姐和PM大哥能同意，强烈推荐大家使用。毕竟，谁不想早点下班学习呢？2.试试filter？另外一个设置模糊的CSS属性就是filter,所以我们的另外一个想法是使用filter来模拟backdrop-filter属性的效果。并且compatibilityoffilter会更好：filter--caiuse[3]。下面看看filter和backdrop-filter效果的区别：z-索引：1；宽度：600px；高度：300px背景颜色：rgba(255,255,255,0.72)；这个效果和实际的设计要求差别很大，需要改！3、filter的组合打孔因为filter设置了整个元素的blur，而不是作为元素的背景容器，所以需要一个和card一样大小的placeholder元素单独设置blur，作为背景元素。3.1.::before+固定双背景图这里我偷懒了，直接用伪元素::before。实际场景中为了考虑兼容性，建议还是使用div块级元素来占位。.card-filter::before{内容：'';位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；/*放置在当前card-filter元素的底部*/filter:blur(10px);/*blur*/background:url(http://p2.qhimg.com/bdr/__85/t01781bd4b1218329e1.??jpg)no-repeatcenterfixed;背景尺寸：封面；}这里注意，卡片采用了和整个容器一样的背景图片属性，通过fixed方法固定背景图片，这样当元素向任意方向滚动时，背景图片都不会移动，保证了背景效果一致。3.2移动时的效果。使用margin属性的负值来扩大容器的模糊效果如下图所示。还是有区别的，因为filter是从容器外边界向内聚合的filter，导致filter外边界出现白圈。此时只需要扩大::before元素的容器大小即可。这里，可以直接使用margin属性的负值来扩展容器。.card-filter::before{...+margin:-20px;}这时候的效果有点“那个意思”，看来是差不多该有所作为了。3.3.::填充消失的背景色后Thebackground-color:rgba(255,255,255,0.72);最初在.card-filter类上设置的不起作用！因为::before伪类作用于.card-filter元素，是它的子元素，又因为::before的background属性设置了背景图片，覆盖了父元素.card-filter的背景色。知道了原因，那我们就可以在.card-filter元素中再添加一个子元素（伪类）来设置背景色！偷懒直接使用::after伪类，不修改DOM结构。.card-filter::after{内容：'';位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；background-color:rgba(255,255,255,0.72);}这时候效果和backdrop-filter差不多：在“自研”的Webview内核中也能看到效果！4.总结一般来说，如果你能说服产品经理和UI小姐姐，就用backdrop-filter吧。说服不了我就用filter的组合来模拟吧！此外，backdrop-filter属性存在性能问题。假设现在是2022年，请升级您的设备！如果文字中的“毛玻璃”与背景没有相对移动，就请UI小姐姐切一张图，直接解决所有兼容性&性能问题！在研究过程中，笔者也尝试了SVG的feGaussianBlur标签。效果和filter一样，会复杂一点，但也是一个可行的方案。可以自己试试~
