CSS3 filter 滤镜效果 发表于 2015-05-19 更新于 2018-12-13 分类于 前端开发 12345678910filter: grayscale(1); /*灰度,取值范围0-1,此处表示100%灰度(灰色)*/filter: sepia(0.5); /*叠加褐色,取值范围0-1,此处表示50%的褐色*/filter: brightness(0.5); /*亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片)*/filter: hue-rotate(30deg); /*色相(按照色相环进行旋转,顺时针方向,红-绿-蓝-红)此处为叠加黄色滤镜*/filter: invert(1); /*反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色*/filter: saturate(4); /*饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大*/filter: contrast(2); /*对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大*/filter: opacity(0.8); /*透明度,取值范围0~1,0为全透明,1为原图*/filter: blur(5px); /*模糊,此处为5像素*/filter: drop-shadow(17px 17px 20px black); /*阴影*/