CSS3的filter属性用于调整页面元素的视觉效果，包括灰度、亮度、模糊度和透明度等。例如，使用grayscale(1)可将元素变为全灰，brightness(0)使其变暗，blur(px)增加模糊效果，而opacity(0)则让元素完全透明。hue-rotate允许旋转色相。通过这些函数，开发者能创造出各种独特的视觉体验。
filter是css3中的滤镜属性，可以用来调整页面元素的模糊度、亮度、灰度等特征，常用的功能如下：
| 滤镜效果 | filter函数 | 补充 |
|---|---|---|
| 无 | none | 默认值，没有效果 |
| 灰度 | grayscale(%) | 括号内的取值为0-1，小数和百分数都行，grayscale(1)表示转为完全灰色 |
| 亮度 | brightness(%) |
默认是1,0是全黑 |
| 模糊 | blur(px) | 值越大越模糊，默认是0px |
| 透明度 | opacity(%) | 默认是1，0是完全透明 |
| 色相旋转 | hue-rotate(%) | 默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈 |
元素或网页置灰效果：
只需给想要增加效果的元素添加样式
filter: grayscale(1)
结果实例（以百度首页为例），添加filter样式前：
添加filter样式后：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
