CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果

CSS filter 属性用于对元素（主要是图片）应用图形效果，如模糊、饱和度调整、色调旋转等。它直接作用于元素的像素渲染，类似于图像处理软件中的滤镜功能。语法为：filter: 函数名(参数)，多个滤镜可以用空格叠加使用，例如 filter: sepia(0.5) blur(2px) contrast(1.2);。

常用滤镜函数包括：
• blur(px) - 高斯模糊
• brightness(%) - 亮度调节
• contrast(%) - 对比度
• grayscale(%) - 灰度
• sepia(%) - 棕褐色
• saturate(%) - 饱和度
• hue-rotate(deg) - 色相旋转
• invert(%) - 反转颜色
• opacity(%) - 透明度
• drop-shadow() - 投影阴影（与box-shadow不同，它遵循元素轮廓）

在 filter 属性中用空格分隔多个滤镜函数即可叠加。例如：filter: sepia(0.5) contrast(1.2) brightness(0.9) saturate(1.5); 会同时应用棕褐色、高对比度、略暗亮度和高饱和度。注意顺序会影响最终效果，因为每个滤镜都在前一个滤镜的输出基础上进行处理。建议先应用颜色调整（sepia、saturate、hue-rotate），再应用几何效果（blur）。

filter 作用于元素自身（包括其内容），而 backdrop-filter 作用于元素背后的区域。backdrop-filter 常用于创建毛玻璃（frosted glass）效果——元素本身保持清晰，但其背景内容被模糊或变色。例如导航栏使用 backdrop-filter: blur(10px); 可以实现半透明模糊背景。

CSS filter 通常会触发GPU加速，对于简单的滤镜组合性能影响很小。但需要注意：
• blur() 半径越大，性能消耗越高
• 在大量元素上同时使用滤镜可能影响渲染性能
• 在动画中频繁改变滤镜值建议使用 will-change: filter 提示浏览器优化
• 移动端设备上复杂滤镜组合可能导致帧率下降，建议在移动端谨慎使用大模糊半径

CSS filter 属性在现代浏览器中兼容性非常好：Chrome 53+、Firefox 35+、Safari 9.1+、Edge 12+ 均完整支持。对于旧版Safari（9.0之前），需要使用 -webkit-filter 前缀。目前全球超过98%的浏览器都支持该属性。IE浏览器不支持filter属性（IE已停止维护）。

可以！CSS filter 可以应用于任何HTML元素，包括文字、SVG图形、视频、Canvas等。例如给文字添加 filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); 可以创建文字投影，而 filter: blur(3px); 可以让文字变得模糊。对于SVG元素，filter同样有效，这为图标和矢量图形提供了丰富的视觉效果。

通过JavaScript操作元素的 style.filter 属性即可：
element.style.filter = 'grayscale(100%) blur(2px)';
也可以使用CSS类切换或CSS自定义属性（变量）结合JS来动态调整滤镜参数。本工具提供的预设都可以直接复制CSS代码并在项目中使用。

如果不需要模糊效果但图片看起来不清晰，检查滤镜组合中是否误加了 blur()。另外，某些滤镜组合（特别是高对比度+亮度调整）可能让图片细节丢失，呈现"模糊"的视觉效果。建议逐一调试参数，或在本工具中预览不同预设找到最佳效果。对于Retina屏幕，确保图片分辨率足够高。