CSS滤镜生成器 - filter可视化工具

# 什么是 CSS filter？

CSS filter 属性允许您为元素添加视觉效果，如模糊、亮度调整、对比度增强等。 滤镜可以应用于任何元素，包括图像、视频和容器元素。这是CSS3引入的强大功能， 可以在不使用图像编辑软件的情况下直接在网页上实现各种视觉效果。

filter 属性支持多种滤镜函数，可以单独使用，也可以组合使用。 组合多个滤镜时，它们会按照声明顺序依次应用。

# 常用 filter 函数

• blur(px): 高斯模糊，值越大越模糊
• brightness(%): 亮度调整，100%为原始亮度
• contrast(%): 对比度调整，100%为原始对比度
• saturate(%): 饱和度调整，100%为原始饱和度
• grayscale(%): 灰度转换，100%完全灰度
• sepia(%): 复古褐色效果，100%完全褐色
• hue-rotate(deg): 色相旋转，改变整体色调
• invert(%): 反色效果，100%完全反色
• opacity(%): 透明度，0%完全透明
• drop-shadow(): 投影效果

# 如何使用本工具

1. 使用滑块调整各种滤镜参数
2. 实时查看预览区域的滤镜效果
3. 尝试预设效果快速应用常见滤镜组合
4. 点击"复制"按钮获取生成的CSS代码

# 常见问题 (FAQ)