1.css中的图像处理：滤镜
1.1调色滤镜
通过滤镜可以给元素应用一种或者多种特效，其中一部分滤镜与颜色有关，可用于调亮度，对比度，和饱和度
- 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 阴影
grayscale灰度
如果使用该效果参数里没值的话将会以100%来渲染，取值0-1之间为不同的灰度-webkit-filter:grayscale(1) ;
sepia
褐色，就是美图秀秀里有个怀旧功能的那种效果，取值也是0-1，-webkit-filter:sepia(1) ;
saturate饱和度
该属性改变图片的饱和度，取值范围为数字即可，默认值100%，-webkit-saturate(6) ;
hue-rotate色相旋转
hue-rotate用来改变图片的色相，默认值为0deg，取值为angle，示例：-webkit-filter:hue-rotate(180deg)
invert反色
invert的效果就和照片底片有点相似
opacity透明度
-webkit-filter:opacity(0.3) 与opacity属性区别在于，前者的实际效果会取决于它在滤镜链条中的位置，opacity属性则总是在所有的滤镜应用完之后才起作用
brightness亮度
改变图片的亮度，默认值为100%，示例：-webkit-filter:brightness(0.5)
contrast对比度
这个属性取值和饱和度saturate类似
blur模糊
这个属性改变图片的清晰度，默认值为0
drop-shadow阴影
这个类似于box-shadow，给图片加阴影,与box-shadow和text-shadow属性很像，但也有局限和不同的花样
div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把选中的所有的非透明区域都做了阴影效果，就相当于一种真正的投影，这里为了看得更清楚特意把边框弄成虚线，所以能看到凡是边框显示出来的部分，都有drop-shadow属性，但是在严格意义上讲，drop-shadow更应该说是投影
上面是box-shadow，下面是
drop-shadow
多个属性示例：
-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3)