css中的filter

CSS 的 filter 属性允许你在元素上应用各种图像效果，例如模糊、颜色调整、亮度调整等。通过 filter 属性，你可以实现很多有趣的视觉效果。

以下是一些常用的 filter 属性及其用法：

1. 模糊（Blur）

filter: blur(5px);
/* 这会将元素的内容模糊化，数值越大，模糊效果越明显。*/

2.亮度（Brightness）

filter: brightness(0.8);
 /* 这会降低元素的亮度，值范围从 0 到 1，其中 0 表示完全黑暗，1 表示原始亮度 */

3.对比度（Contrast）

filter: contrast(1.2);
 /* 这会增加元素的对比度，值越大，对比度越高 */

4.饱和度（Saturate）

filter: saturate(1.5);
 /* 这会增加元素的饱和度，值越大，颜色越鲜艳 */

5.反色（Invert）

filter: invert(0.5);
 /* 这会将元素的颜色反转，值为 0 表示完全反转，1 表示原始颜色 */

6.色调旋转（Hue Rotation）

filter: hue-rotate(90deg);
 /* 这会对元素的色调进行旋转，值为角度，可以是正值或负值 */

7.阴影（Drop Shadow）

filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
 /* 这会在元素周围创建一个阴影效果，你可以指定阴影的偏移量、模糊半径和颜色 */