用好CSS filter，只有一个图标，也可以实现多个状态

在一个苦逼的toB公司里面，设计师的人数就跟吃方便面一样尴尬，多吃一包吧又吃不完，只吃一包吧又吃不饱。因此，在我司设计师工作足够饱和的情况下，内部系统页面的开发的审美重任就落到了前端开发工程师上，早就了我养成了能不麻烦UI的，尽量不去麻烦的习惯。

刚好有一个需求，需要用到文件夹的这个图标，我心想不用麻烦UI了，我自己上网搜一个就好了，于是我就找到了如图所示的图标

image.png

在我开发完以后，产品提高了用户体验，说文件夹的样式要区分空文件夹，非空文件夹，失效文件夹，从而减少系统使用者的操作。要是在以往的toC的公司，我一定把这个事情交给UI去搞几个不同样式的图标出来，既保证了美观，又不需要我思考。但是这一切都变了，于是我想到了这样的馊主意

空文件夹，我们只要设置透明度就好了，直接设置opacity为0.6

.box-item__img {
  vertical-align: middle;
  width: 38px;
  height: 36px;
}
.empty__img {
  opacity: 0.6;
}

但是失效的文件夹在通常情况下，UI也是让他变成灰色就可以了，于是我想起了CSS中的filter，于是用了下面的代码

.lose-efficacy__img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

效果如图所示

image.png

当然，关于filter的一些用法我也忘记得差不多了，于是顺便重温一下filter的用法，具体的用法我也不在这里重复复制粘贴了，建议大家可以在MDN上去看

MDN关于CSS-filter的介绍

现在绝大多数公司的前端，并不会考虑太多关于css的知识，而且我们在平时的开发场景中也很少用到这类，前后端分离让我们的视野不局限在于页面布局，忘记一部分css也无可厚非，但是我们作为技术不可能什么都记得清清楚楚，但是多学习，多总结，多反思总是对自己好的