CSS 滤镜生成器
可视化生成 CSS filter 滤镜：支持 blur 模糊、brightness 亮度、contrast 对比度、
saturate 饱和度、grayscale 灰度、sepia 褐色、hue-rotate 色相旋转、invert 反色、opacity 透明度
与 drop-shadow 投影共 10 种滤镜函数。每个滤镜独立启用与参数调节，实时预览效果，一键复制 CSS 代码。
内置复古、黑白、高饱和等 8 组预设。支持上传图片预览或使用内置彩色测试图。所有处理在浏览器本地完成。
/* 当前未启用任何滤镜 */
常见问题
CSS filter 属性支持哪些滤镜函数？
filter 属性支持 10 种滤镜函数，可组合使用（空格分隔）：
① blur(px) 高斯模糊，0 为清晰，值越大越模糊
② brightness(%) 亮度，100% 为原图，0% 全黑，200% 倍亮
③ contrast(%) 对比度，100% 为原图，0% 全灰，200% 倍增
④ drop-shadow(x y blur color) 投影，类似 box-shadow 但跟随元素轮廓
⑤ grayscale(%) 灰度，0% 彩色，100% 全灰
⑥ hue-rotate(deg) 色相旋转，0deg 不变，0-360° 循环
⑦ invert(%) 反色，0% 原色，100% 完全反转
⑧ opacity(%) 透明度，100% 不透明，0% 完全透明
⑨ saturate(%) 饱和度，100% 原图，0% 无彩色，200% 倍增
⑩ sepia(%) 褐色（复古），0% 原图，100% 全褐色
drop-shadow 与 box-shadow 有什么区别？
两者都生成阴影，但作用对象不同：
box-shadow：作用于元素的矩形边界框，阴影是矩形轮廓，忽略透明区域。
对 PNG 透明图片，阴影仍是矩形。
drop-shadow：作用于元素的实际可见轮廓（alpha 通道），阴影跟随
PNG 透明图片的实际形状、文字字形、SVG 路径。对不规则形状元素，drop-shadow 效果更自然。
此外，drop-shadow 性能开销略高于 box-shadow（需计算 alpha 轮廓），但作为 filter 一部分
可与其他滤镜组合使用，box-shadow 不行。
多个滤镜的组合顺序有影响吗？
有影响。CSS filter 的多个函数按从左到右顺序依次应用，顺序不同结果不同。例如
filter: sepia(100%) hue-rotate(180deg) 与
filter: hue-rotate(180deg) sepia(100%) 结果不同——前者先将图片转为褐色，
再将褐色色相旋转 180° 变为蓝色调；后者先将原图色相旋转再转褐色，效果完全不同。
本工具按定义顺序生成 CSS 代码，建议通过预览实时观察组合效果。
hue-rotate 色相旋转的原理是什么？
hue-rotate 在 HSL 色彩空间中将每个像素的色相（Hue）值旋转指定角度。
色相是一个 0-360° 的环形值（0° 红、120° 绿、240° 蓝），旋转 180° 后红色变青色、
绿色变品红、蓝色变黄色。它只改变色相，不改变亮度（Lightness）和饱和度（Saturation），
因此 hue-rotate(0deg) 与 hue-rotate(360deg) 效果相同（回到原色）。
常用于快速变换图片主色调，如冷色↔暖色转换。
filter 滤镜会影响性能吗？
会，但影响可控。filter 是 GPU 加速的合成属性，不会触发重排（reflow），
但会触发重绘（repaint）+ 合成（composite）。性能开销取决于滤镜类型与作用区域大小：
① blur 与 drop-shadow 开销最大（需高斯卷积计算），大区域
模糊可能导致动画卡顿
② brightness/contrast/saturate/grayscale/sepia/invert/opacity/hue-rotate
开销较小（逐像素颜色变换）
建议：动画场景避免对大元素使用大半径 blur；静态场景可自由组合。本工具的"朦胧"
预设仅用 blur(2px)，开销很小。
filter 能用于哪些元素？
filter 可应用于几乎所有可见元素：图片（<img>）、
文字、div 容器、SVG 元素、视频（<video>）等。常见场景：
① 图片调色：统一站点图片风格（复古/黑白/冷色调）
② 图标变色：用 hue-rotate 或 invert 改变图标颜色
③ 悬停动效：.btn:hover { filter: brightness(1.1) } 提亮反馈
④ 毛玻璃效果：backdrop-filter: blur(10px)（注意是 backdrop-filter，
作用于元素背后的内容）
注意：filter: none 可清除所有滤镜。
backdrop-filter 和 filter 有什么区别？
filter：作用于元素自身及其子元素的内容，如 filter: blur(5px)
会让图片本身变模糊。
backdrop-filter：作用于元素背后的内容（透过元素看到的内容），
如 backdrop-filter: blur(10px) 让导航栏背后的页面内容模糊，产生毛玻璃效果。
两者可组合使用：导航栏自身 filter: brightness(0.9) 提暗，同时
backdrop-filter: blur(10px) 模糊背景。
兼容性：backdrop-filter 在旧版 Firefox 需加 -webkit- 前缀，
现代浏览器已全面支持。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有滤镜参数调节、图片预览与 CSS 生成由 JavaScript 在你本地执行， 上传的图片仅用于本地预览，不会发送到任何服务器。全程零网络请求，可离线使用。