1、CSS滤镜的使用背景
滤镜13年就开始使用，浏览器支持度比较高
如果是国民级产品，用户基数下沉，肯定要考虑兼容性，
实际项目应用中，如果不需要兼容IE和Edge，可以放心使用；
2、使用CSS滤镜和opacity的区别？
CSS滤镜和opacity区别在于：部分浏览器下，opacity滤镜可以启用硬件加速，性能会更好。
3、滤镜应用场景：
（1）背景模糊，filter:blur
弹框出现的时候，让弹框背后的元素模糊，从而让视觉更聚焦；
（2）滤镜投影：filter:drop-shadow
可以让任意的图形区域，只要是非透明的都能产生投影效果；
4、投影滤镜和box-shadow的区别？
（1）语法
- filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
例如：filter:drop-shadow(5px 5px 10px black) - box-shadow: 5px 5px 10px black;
同样的值，box-shadow阴影距离更小，颜色值会更深
（2）区别 - box-shadow支持内阴影效果，而drop-shadow却没有这种效果
- box-shadow是盒阴影，而drop只要是非透明的部分就有阴影，透明的部分光线会穿过。
（3）两者区别的详细解说详看：CSS3 filter:drop-shadow滤镜与box-shadow区别应用
5、CSS滤镜其他常用用法
（1）灰度：filter:grayscale
点亮徽章再也不需要两张图了，只需要准备一张彩图，至于没有激活的灰图，我们可以使用滤镜控制
（2）实现局部模糊和径向模糊
mask-image属性：遮罩，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。
径向渐变：radial-gradient()函数
图标变色：一个图标背景颜色从深色变成白色
将图标由蓝色变成白色：filter: brightness(100);
（3）色调变化filter:hub-rotate的应用
色调旋转滤镜实现流动色彩和按钮的批量生产
关于滤镜的详细解说请移步：FDCon2019大会分享之滤镜与混合模式实录
关于CSS滤镜的在线demo：在线demo
