/* 模糊滤镜 */ .blur{ filter: blur(10px); } /* 灰度滤镜 */ .grayscale{ filter: grayscale(100%); } /* 色相旋转滤镜 */ .hue-rotate{ filter: hue-rotate(90deg); } /* 亮度滤镜 */ .brightness{ filter: brightness(200%); } /* 对比度滤镜 */ .contrast{ filter: contrast(150%); } /* 饱和度滤镜 */ .saturate{ filter: saturate(200%); } /* 反转颜色滤镜 */ .invert{ filter: invert(100%); } /* 透明度滤镜 */ .opacity{ filter: opacity(0.5); } /* 混合模式滤镜 */ .blend{ mix-blend-mode: multiply; }
以上就是CSS3滤镜属性的几种常用的效果。大家可以根据实际需要来使用这些效果,给页面带来更美观和生动的效果。