「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
前言
filter是css3的一个属性，大家应该都很少用到，很多人只是知道有这个属性。Webkit率先支持了这几个功能，不过现在大部分浏览器也都做了兼容性，下面大家就一起来学习吧。
参数语法
现在规范中支持的效果有：
| 参数 | 描述 | 取值 |
|---|---|---|
| grayscale | 灰度 | 值为0-1之间的小数 |
| sepia | 褐色 | 值为0-1之间的小数 |
| saturate | 饱和度 | 值为num |
| hue-rotate | 色相旋转 | 值为angle |
| invert | 反色 | 值为0-1之间的小数 |
| opacity | 透明度 | 值为0-1之间的小数 |
| brightness | 亮度 | 值为0-1之间的小数 |
| contrast | 对比度 | 值为num |
| blur | 模糊 | 值为length |
| drop-shadow | 阴影 |
语法
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
示例
无效果filter:none;
模糊filter:blur(10px);
灰度filter:grayscale(0.5);
亮度filter:brightness(0.5);
对比度filter:contrast(2.6);
饱和度filter:saturate(7.9);
色相旋转filter:hue-rotate(260deg);
反色filter:invert(0.9);
阴影filter:drop-shadow(10px 10px 10px #000);
组合
最后大家看看几种组合效果
是不是感觉美美哒了，美女换了身衣服，皮肤也变得红润了，头发唇彩等都变了。前端也可以用代码P出好看的图片，是不是很厉害？
上面的效果代码：
filter:saturate(1.9) contrast(.6) hue-rotate(320deg);
