Open NancyFan opened 9 years ago
CSS3 最初的滤镜效果是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
Filters主要是运用在图片上，以实现一些特效。Fliter语法为： filter: none | < filter-function > [ < filter-function> ]*
其默认值是none，他不具备继承性，其中filter-function具有以下值可选：
图像模糊参数单位:px/em/pt；默认值：0px。e.g. filter:blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px);
灰度参数:百分比 0%-100%；默认值：100％，如果你在grayscale()中没有任何参数值，将会以“100%”渲染。e.g. filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);
怀旧参数:百分比 0%-100%；默认值：100%。e.g. filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);
饱和度参数:半分比,以100%为中间值；默认值：100%。e.g. filter: saturate(50%); -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%); 饱和度大于100% 饱和度小于100%
色相参数:角度值0—360；默认值：0deg。e.g. filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); -moz-filter: hue-rotate(180deg); -o-filter: hue-rotate(180deg); -ms-filter: hue-rotate(180deg);
反相参数：百分比；0%-100%；默认值100%。e.g. filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
filter: opacity(80%); -webkit-filter: opacity(80%); -moz-filter: opacity(80%); -o-filter: opacity(80%); -ms-filter: opacity(80%);
亮度参数:"-1"至"1",值越大亮度越高。e.g. filter: brightness(0.3); -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); -o-filter: brightness(0.3); -ms-filter: brightness(0.3); 亮度大于0 亮度小于0
对比度参数:百分比；以100%为中间值。e.g. filter: contrast(50%); -webkit-filter: contrast(50%); -moz-filter: contrast(50%); -o-filter: contrast(50%); -ms-filter: contrast(50%); 对比度小于100% 对比度大于100%
filter: drop-shadow(5px 5px 5px #ccc); -webkit-filter: drop-shadow(5px 5px 5px #ccc); -moz-filter: drop-shadow(5px 5px 5px #ccc); -o-filter: drop-shadow(5px 5px 5px #ccc); -ms-filter: drop-shadow(5px 5px 5px #ccc);
CSS Filter Effects
CSS3 最初的滤镜效果是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
使用方法
Filters主要是运用在图片上，以实现一些特效。Fliter语法为： filter: none | < filter-function > [ < filter-function> ]*
其默认值是none，他不具备继承性，其中filter-function具有以下值可选：
浏览器兼容性
效果实现
Blur(模糊)
图像模糊参数单位:px/em/pt；默认值：0px。e.g. filter:blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px);
Grayscale(灰度)
灰度参数:百分比 0%-100%；默认值：100％，如果你在grayscale()中没有任何参数值，将会以“100%”渲染。e.g. filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);
Sepia(怀旧)
怀旧参数:百分比 0%-100%；默认值：100%。e.g. filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);
Saturation(饱和度)
饱和度参数:半分比,以100%为中间值；默认值：100%。e.g. filter: saturate(50%); -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%); 饱和度大于100%
饱和度小于100%
Hue Rotate(色相)
色相参数:角度值0—360；默认值：0deg。e.g. filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); -moz-filter: hue-rotate(180deg); -o-filter: hue-rotate(180deg); -ms-filter: hue-rotate(180deg);
Invert(反相)
反相参数：百分比；0%-100%；默认值100%。e.g. filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
opacity(透明度)
filter: opacity(80%); -webkit-filter: opacity(80%); -moz-filter: opacity(80%); -o-filter: opacity(80%); -ms-filter: opacity(80%);
brightness(亮度)
亮度参数:"-1"至"1",值越大亮度越高。e.g. filter: brightness(0.3); -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); -o-filter: brightness(0.3); -ms-filter: brightness(0.3); 亮度大于0
亮度小于0
contrast(对比度)
对比度参数:百分比；以100%为中间值。e.g. filter: contrast(50%); -webkit-filter: contrast(50%); -moz-filter: contrast(50%); -o-filter: contrast(50%); -ms-filter: contrast(50%); 对比度小于100%
对比度大于100%
drop-shadow(阴影)
filter: drop-shadow(5px 5px 5px #ccc); -webkit-filter: drop-shadow(5px 5px 5px #ccc); -moz-filter: drop-shadow(5px 5px 5px #ccc); -o-filter: drop-shadow(5px 5px 5px #ccc); -ms-filter: drop-shadow(5px 5px 5px #ccc);