前言
filter属性是CSS3新增的属性，使用该属性，我们可以为图像或背景添加滤镜、模糊、亮度、对比度等效果。
常用的filter函数
blur 模糊
为图像设置高斯模糊，默认值为 0，单位可以指定为 CSS 长度，但不接受百分比值。值越大越模糊。
brightness 亮度
number越大图像越亮，number不能取负值，可以是整数也可以是百分比。
grayscale 灰度
将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值。
contrast 对比度
默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度。
saturate 饱和度
默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值。
hue-rotate 色相旋转
该值用来定义色环的度数，默认值为 0deg，代表原始图像，最大值为 360deg
invert 反转图像
默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值。
opacity 不透明度
默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值。
sepia 转为棕褐色
默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值。
drop-shadow 阴影
参数如下：
-
<offset-x><offset-y>（必须） 这是设置阴影偏移量的两个<length>值。<offset-x>设定水平方向距离，负值会使阴影出现在元素左边。<offset-y>设定垂直距离，负值会使阴影出现在元素上方。查看<length>了解可能的单位。 如果两个值都是0，则阴影出现在元素正后面（如果设置了<blur-radius>且/或<spread-radius>也会有模糊效果）。 -
<blur-radius>可选，可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值； -
<spread-radius>：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； -
<color>可选，为阴影添加颜色，如未指定，则由浏览器来决定，通常为黑色。
注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加，则不会有任何效果
整个网站变黑白
其实很简单
html {
filter: grayscale(1);
}
``
