网页制作css滤镜

CSS滤镜基础概念

CSS滤镜（Filter）是一种通过CSS属性对元素进行视觉效果的调整，如模糊、亮度、对比度等。通过filter属性实现，支持多种函数组合使用。

常用滤镜函数

模糊效果（blur）

.element {
  filter: blur(5px);
}

参数为模糊半径，值越大越模糊。

亮度调整（brightness）

.element {
  filter: brightness(150%);
}

百分比值：100%为原图，低于100%变暗，高于100%变亮。

对比度调整（contrast）

.element {
  filter: contrast(200%);
}

百分比值：100%为原图，值越高对比度越强。

阴影效果（drop-shadow）

.element {
  filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

参数分别为水平偏移、垂直偏移、模糊半径和颜色。

复合滤镜效果

多个滤镜函数可组合使用，空格分隔：

.element {
  filter: brightness(120%) contrast(110%) blur(2px);
}

应用示例

图片灰度化

.grayscale-img {
  filter: grayscale(100%);
}

悬停效果增强

.button:hover {
  filter: brightness(110%) drop-shadow(0 0 8px #ff0);
}

浏览器兼容性

现代浏览器普遍支持CSS滤镜，但旧版浏览器（如IE）需前缀或替代方案。可通过工具如Autoprefixer自动添加前缀：

.element {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

性能注意事项

过度使用滤镜（尤其是动画中）可能导致性能问题。建议通过will-change属性优化：

.element {
  will-change: filter;
}