filter in css

CSS filterproperties allow you to apply various image effects to elements, such as blur, color adjustment, brightness adjustment, etc. With filterproperties, you can achieve a lot of interesting visual effects.

Here are some commonly used filterproperties and their usage:

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));
 /* 这会在元素周围创建一个阴影效果，你可以指定阴影的偏移量、模糊半径和颜色 */