css - 滤镜

css3滤镜

语法：filter: value1 value2 ...;

值：

none 默认值、initial 设置为默认值、inherit 继承

opacity(0-1)  透明度，可以写为：opacity: 0-1;  √

grayscale(0-1)  灰度

contrast(0-n)  对比度

saturate(0-n)  饱和度

brightness(0-n)  亮度

blur(npx)  模糊  √

invert(0-1)  反色

sepia(0-1)  褐色

hue-rotate(0-360deg)  色相旋转

drop-shadow(x y blur color)  阴影

url(svg-url#element-id)  svg滤镜  √

grayscale(1) invert(1)  X光

ie滤镜

透明

filter: progid:DXImageTransform.Microsoft.Alpha();

属性：

style  设置透明风格，0 默认  1 线性  2 径向  3 矩形

opacity  设置不透明度值，0-100

finishOpacity  设置最后不透明度值，0-100

startX  设置水平方向开始值，num

finishX  设置水平方向结束值，num

startY  设置垂直方向开始值，num

finishY  设置垂直方向结束值，num

模糊

filter: progid:DXImageTransform.Microsoft.Blur();

filter: progid:DXImageTransform.Microsoft.MutionBlur();

属性1：

pixelRadius  设置模糊程度，num

makeShadow  设置是否处理为阴影，boolean

shadowOpacity  设置阴影的透明度，0-100

属性2：

add  设置图像模糊是否覆盖在原图上，true  false

direction  设置对象模糊方向，0-315

strength  设置对象模糊范围，默认值5

专用颜色透明

filter: progid:DXImageTransform.Microsoft.Chroma();

属性：

color  设置颜色

光源

filter: progid:DXImageTransform.Microsoft.Light();

属性：

addAmbient  加入对象环境光

addCone  加入锥形光源

addPoint 加入点光源

changeColor  改变亮度颜色

changeStrength  改变亮度长度

clear  清除亮度

moveLight  移动光源焦点

发光

filter: progid:DXImageTransform.Microsoft.Glow();

透明掩膜

filter: mask();

属性：

color  设置颜色

阴影

filter: progid:DXImageTransform.Microsoft.Shadow();

filter: progid:DXImageTransform.Microsoft.DropShadow();

属性1：

color  设置颜色

strength  设置范围

direction  设置角度

属性2：

color  设置颜色

offX  设置水平位置

offY  设置垂直位置

positive  设置正反面，0-1

波纹

filter: progid:DXImageTransform.Microsoft.Wave();

属性：

add  0-1

freq  变形值

strength  变形强度

lightStrength  变形百分比

phase  角度变形百分比

灰度

filter: gray;

反色

filter: invert;

X光

filter: xray;

翻转

filter: flipH;

filter: flipV;

马赛克

filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

rgba

progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorstr=‘#886287a7‘, endColorstr=‘#886287a7‘);

png透明、多背景、放大

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader();

属性：

enabled  设置滤镜是否激活，boolean

sizingMethod  设置显示方式， image  crop  scale

src  设置链接

渐变

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#000000, endColorstr=#FFFFFF); 

旋转

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

矩阵

filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod= ‘auto expand‘, M11= fM11, M12= fM12, M21= fM21, M22= fM22 );