filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
blur(px) 模糊
- 对图像应用模糊效果。
- 较大的值会产生更多的模糊。
- 如果未指定值，则使用 0。
brightness(%)亮度 调整图像的亮度。
- 0% 将使图像全黑。
- 100% (1) 是默认值，代表原始图像。
- 超过 100% 的值将提供更明亮的结果。
contrast(%) 对比度 调整图像的对比度。
- 0% 将使图像全黑。
- 100% (1) 是默认值，代表原始图像。
- 超过 100% 的值将提供对比度更高的结果。
drop-shadow(h-shadow v-shadow blur spread color) 投影效果
- h-shadow - 必需。 指定水平阴影的像素值。 负值将阴影置于图像的左侧。
- v-shadow - 必需。 指定垂直阴影的像素值。 负值将阴影置于图像上方。
- 模糊 - 可选。 这是第三个值，必须以像素为单位。 为阴影添加模糊效果。
- 传播 - 可选。 这是第四个值，必须以像素为单位。 正值会导致阴影扩大变大，负值会导致阴影缩小。 如果未指定，它将为 0（阴影将与元素大小相同）。
- 颜色 - 可选。 为阴影添加颜色。 如果未指定，颜色取决于浏览器（通常为黑色）。 注意：Chrome、Safari 和 Opera 以及其他浏览器可能不支持第 4 种长度； 如果添加，它将不会呈现。 创建一个红色阴影的例子，水平和垂直都是8px，模糊效果是10px： filter: drop-shadow(8px 8px 10px red); 提示：此过滤器类似于 box-shadow 属性。
grayscale(%) 灰度 将图像转换为灰度。
- 0% (0) 是默认值，代表原始图像。
- 100% 将使图像完全灰色（用于黑白图像）。
- 注意：不允许使用负值。
hue-rotate(deg) 色调旋转 在图像上应用色调旋转。
- 该值定义了图像样本将被调整的色环周围的度数。
- 0deg 是默认值，代表原始图像。
- 注意：最大值为 360 度。
颜色转变跟最开始的颜色有关，变化：红橙黄绿青蓝紫，循环。（自己测试的）
invert(%) 反转图像中的样本
- 0% (0) 是默认值，代表原始图像。
- 100% 将使图像完全倒置。超过百分百还是百分百的效果
- 注意：不允许使用负值。
设置负数会失效，不起作用
opacity(%)透明度 设置图像的不透明度级别。
不透明度级别描述了透明度级别，
- 其中：0% 是完全透明的。
- 100% (1) 是默认值，代表原始图像（无透明度）。
- 注意：不允许使用负值。 提示：此过滤器类似于不透明度属性。 设置小数也可以
saturate(%) 图像饱和
- 0% (0) 将使图像完全不饱和。
- 100% 是默认值，代表原始图像。
- 超过 100% 的值提供超饱和结果。 注意：不允许使用负值。
sepia(%) 图像转换为棕褐色
- 0% (0) 是默认值，代表原始图像。
- 100% 将使图像完全棕褐色。 超过100还是100的样子 注意：不允许使用负值。
