css滤镜用法枚举，枚举用法并解释

以下是 CSS 滤镜的用法及其解释：

1. blur(px)

模糊效果。参数是模糊的半径，以像素为单位。

filter: blur(5px); /* 将元素模糊5像素 */

2. brightness(%)

调整亮度。参数是百分比，100% 表示原始亮度。

filter: brightness(150%); /* 将元素亮度增加到150% */

3. contrast(%)

调整对比度。参数是百分比，100% 表示原始对比度。

filter: contrast(200%); /* 将元素对比度增加到200% */

4. drop-shadow(offset-x offset-y blur-radius color)

添加阴影效果。参数包括阴影的水平偏移、垂直偏移、模糊半径和颜色。

filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5)); /* 添加一个10像素偏移、5像素模糊的黑色半透明阴影 */

5. grayscale(%)

将元素转换为灰度。参数是百分比，100% 表示完全灰度。

filter: grayscale(100%); /* 将元素完全转换为灰度 */

6. hue-rotate(deg)

旋转色相。参数是角度，单位是度。

filter: hue-rotate(90deg); /* 将元素色相旋转90度 */

7. invert(%)

反转颜色。参数是百分比，100% 表示完全反转。

filter: invert(100%); /* 将元素颜色完全反转 */

8. opacity(%)

调整透明度。参数是百分比，100% 表示完全不透明。

filter: opacity(50%); /* 将元素透明度设置为50% */

9. saturate(%)

调整饱和度。参数是百分比，100% 表示原始饱和度。

filter: saturate(200%); /* 将元素饱和度增加到200% */

10. sepia(%)

将元素转换为棕褐色。参数是百分比，100% 表示完全棕褐色。

filter: sepia(100%); /* 将元素完全转换为棕褐色 */

11. url(#filter-id)

引用 SVG 滤镜。参数是 SVG 滤镜的 ID。

filter: url(#my-filter); /* 应用ID为my-filter的SVG滤镜 */

12. none

移除所有滤镜效果。

filter: none; /* 移除所有滤镜效果 */

13. initial

将滤镜属性设置为其默认值。

filter: initial; /* 将滤镜属性设置为默认值 */

14. inherit

继承父元素的滤镜属性。

filter: inherit; /* 继承父元素的滤镜属性 */

15. unset

将滤镜属性重置为其自然值（即继承或初始值）。

filter: unset; /* 将滤镜属性重置为其自然值 */

16. 组合使用

可以组合多个滤镜效果，使用空格分隔。

filter: blur(5px) brightness(150%) contrast(200%); /* 同时应用模糊、亮度和对比度效果 */

通过这些用法，CSS 滤镜可以实现各种视觉效果，增强网页的视觉表现力。

css滤镜用法枚举，仅枚举用法，不做解释

1. filter: blur(px);

2. filter: brightness(%);

3. filter: contrast(%);

4. filter: drop-shadow(offset-x offset-y blur-radius color);

5. filter: grayscale(%);

6. filter: hue-rotate(deg);

7. filter: invert(%);

8. filter: opacity(%);

9. filter: saturate(%);

10. filter: sepia(%);

11. filter: url(#filter-id);

12. filter: none;

13. filter: initial;

14. filter: inherit;

15. filter: unset;

16. filter: custom-function();

17. filter: blur(px) brightness(%) contrast(%) drop-shadow(offset-x offset-y blur-radius color) grayscale(%) hue-rotate(deg) invert(%) opacity(%) saturate(%) sepia(%) url(#filter-id);