浅谈CSS3滤镜的10种特效（上）滤镜主要是用在图片上，实现一些特效（虽然也可以用在视频上）。不过我们主要讨论Filter在图片上的应用。今天我们将学习前五个效果。1.1.语法css选择器{filter:none|过滤功能;}1.2。Filtervalue其默认值为none，且不被继承。其中，filter-function有以下可选值：1.2.1。灰度使用此特效会将图片变成灰色，这意味着您的图片将只有两种颜色——“黑色”和“白色”。.grayscale{-webkit-filter:grayscale(1);}默认值：100%。如果sepia()中没有任何参数值，则默认为“100%”渲染，具体效果如图1.2.2所示。sepiabrownsepia翻译过来就是“棕色”，使用这个特效会让你的照片复古老黑白photos.sepia{-webkit-filter:sepia(1);}默认值：100%1.2.3.saturatesaturate的作用是改变图片的饱和度。.saturate{-webkit-filter:saturate(0.5);}1.2.4.hue-rotate色调旋转hue-rotate的作用是改变图片的色调。hue-rotate{-webkit-filter:hue-rotate(90deg);}默认值：0deg1.2.5。invertinvert的效果就像我们camera.invert的底面效果{-webkit-filter:invert(1);}Defaultvalue:100%1.2.6.代码效果图第一步：HTML结构代码第二步：CSS全局样式第三步：设置不同的滤镜效果第四步：查看效果更多技术资料可关注：gzitcast
