简单，常用，基础的css滤镜效果!

第一次写博客，有些紧张。如写的不好，尽请谅解! 2019-10-28 09:33:48

第一:透明度滤镜

该滤镜的效果其实跟调整透明度差不多。它总共有7个参数!语法如下!（摈弃那些花里胡哨，我们只需要第一个参数就行了!）

filter:alpha(opacity=不透明度,finishopacity=结束时不透明度,style=形状特征,startX=开始横坐标,startY=开始纵坐标,finish=X=结束横坐标,finishY=结束纵坐标)；

在这里解释一下:style有4个参数:数值为0时表示匀速渐进,数值为1时表示线性渐进,为2时表示放射渐进,为3时表示直角渐进。

案例:filter:alpha(opacity=0.4)

第二:模糊滤镜

该滤镜的效果就是对照片进行模糊。它总共有1个参数!语法如下!

filter:blur(模糊程度)；参数为像素，在0-10px之间,大于10px就没效果,0px和10px时模糊程度为0,在1-9px数值越大模糊程度越大!

案例:filter:blur(3px);

第三:灰度滤镜

该滤镜的效果就是对照片进行灰度调整,使其看起来像回忆照的效果。它总共有1个参数!语法如下!

filter:grayscale(灰度大小)；参数为0-1或者0%-100%之间.参数值越大,灰度值越大!

案例:filter:grayscale(0.4);

第四:sepia(褐色)滤镜

该滤镜的效果就是对照片进行褐色程度调整,使其看起来像老照片。它总共有1个参数!语法如下!

filter:sepia(褐色程度大小)；参数为0-1或者0%-100%之间.参数值越大,褐色值值越大!

案例:filter:sepia(1);

第五:brightness(亮度)滤镜

该滤镜的效果就是对照片进行光亮程度调整。它总共有1个参数!语法如下!

filter:brightness(亮度大小);它的参数分为几部分,0-1或0%-100%之间是在原图的基础上暗沉图片,数值越小,图片越暗,0时全黑;2-10之间是在原图的基础上调高图片亮度,10时全白!

案例:filter:brightness(2);

第六:hue-rotate(色相)滤镜

该滤镜的效果就是对照片调整色相。它总共有1个参数!语法如下!

filter:hue-rotate(色相角度)。它的参数为任何角度,具体什么角度什么色调我说不清,大家可以去实践了解

案例:filter:hue-rotate(300deg);

第七:invert(反色)滤镜

该滤镜的效果就是对照片反色调整。它总共有1个参数!语法如下!

filter:invert(反色参数)。它的参数为0-1或0%-100%之间。

案例:filter:invert(1);

第八:saturate(饱和度)滤镜

该滤镜的效果就是对照片饱和度调整。它总共有1个参数!语法如下!

filter:saturate(饱和度)。它的参数为0-1或1-10，0-1表示饱和度在原有的基础上降低，数值越小，越低，为1饱和度与原照片相等。1-10表示饱和度在原有的基础上增加,数值越高，饱和度越大,10封顶。

案例:filter:saturate(2);

第九:contrast(对比度)滤镜

该滤镜的效果就是对照片对比度进行调整。它总共有1个参数!语法如下!

filter:contrast(对比度值)。它的参数为0-1或1-10之间,和饱和度的原理差不多。

案例:filter:contrast(4);

第十:drop-shadow(阴影)滤镜

该滤镜的效果就是对照片反色调整。它总共有1个参数!语法如下!

filter:drop-shadow(横轴阴影大小纵轴阴影大小模糊半径阴影颜色)。

案例:filter:drop-shadow(10px 10px 100px black);

最后，笔者希望大家都能在我的这篇博客中获得自己想要的知识点,多谢观看哪!

若还有什么疑虑的地方,可以参考菜鸟教程。

巴特西