CSS3滤镜

CSS3滤镜

CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。

浏览器的支持情况

属性值预览

1. grayscale(100%)

   修改所有图片的颜色为黑白 (100% 灰度)

2. blur(10px)

   设置高斯模糊，单位为px，值越大越模糊

3. brightness(%)

   使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。可以超过100%;

4. contrast(%)

   调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

5. hue-rotate(deg)

   给图像应用色相旋转。值为0deg，则图像无变化。超过360deg的值相当于又绕一圈。

6. invert(%)

   反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。

7. opacity(%)

   转化图像的透明程度。值定义转换的比例。0%则是完全透明,100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

8. saturate(%)

   转换图像饱和度。0%则是完全不饱和，100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。效果跟grayscale好像

9. sepia(%)

   将图像转换为深褐色。100%则完全是深褐色的，0%图像无变化。最大值为100%

10. url()

    URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

11. drop-shadow(offset-x offset-y blur-radius spread-radius color)

    这个属性与box-shadow属性很像，但是它没有inset这个关键字，使用滤镜的这个属性，浏览器为了更好的性能提升会使用硬件加速，第一个值设置X轴的偏移程度，负数则是在图像的左边，第二个值则是设置Y轴的偏移程度，前两个值必填。第三个值是用来设置模糊程度，值越大越模糊，阴影越大，不允许设置负值。第四个值正数会使得阴影变大，负数使得阴影缩小 第五个颜色的值则是用来设定颜色*/

 

效果查看