CSS滤镜及渐变 (filter样式表属性)

滤镜效果 描述 　　 ----------------------------------------------------- Alpha 设置了透明度 　　 Blur 创建了模糊的效果 　　 Chroma 把指定的颜色设置为透明 　　 Dropshadow 创建一种偏移的影象轮廓,既投射阴影 　　 Filph 水平翻转 　　 Filpv 垂直翻转 　　 Glow 为对象的外边界增长光效 　　 Grayscale 下降图片的彩度 　　 Invert 将色彩,饱和度以及亮度值彻底翻转创建底片效果 　　 Light 再一个对象上面进行灯光投影 　　 Mask 为一个对象创建透明膜 　　 Shadow 创建一个对象的固体轮廓,即阴影效果 　　 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 　　 Xray 只显示对象的轮廓 　　 ------------------------------------------------------- 　　 1.Alpha属性 语法:filter :alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX 　　 startY=startY,finishX=finishX,finishY=finishY) 　　 功能:它把一个目标元素与背景相混合,即设置图片透明度 　　 参数: opacity :表明透明水准,默认范围 0---100 0彻底透明 finishopacity :可选,若是想要设置渐变的透明效果,就可使用它来指定结束时的透明度0-100 　　 style: 指定了透明区域的形状特征 　　 0---表明统一形状 　　 1---表明线形 　　 2---放射形 　　 3---表明长方形 　　 startx ,starty :表明渐变透明效果开始的X和Y坐标值 　　 finishX,finishY:表明渐变透明效果结束的X和Y坐标值 2.Blur属性 　　 语法: filter: blur(add=add,direction=direction,strength=strength) 　　 功能: 它用于产生模糊效果 　　 参数: add : true/fale ,它指定图片是否被改变成印象派的模糊效果.模糊效果是按顺时针方向进行的. 　　 direction : 用来设置模糊的方向. 0表明垂直方向.而后每45度一个单位,默认值是向左的270度. 　　 0--向上 45--右上 90--右 依次类推 　　 3.Chroma属性 　　 语法: filter chroma(color=color) 功能：用来设置一个对象中指定的颜色为透明色.color即为要设为透明色的颜色. 　　 参数: #RRGGBB /#ffff00 两种颜色格式 　　 4.Dropshadow属性 　　 语法: filter dropshadow(color=color,offx=offx,offY=offY,positive=positive) 　　 功能: 用于为对象添加阴影效果. 　　 参数: color :表明投影的颜色 　　 offx,offy:表明X方向和Y方向阴影的偏移量。必用整数来指定。 　　 positive : 1 true 表明为任何的非透明像素创建可见的阴影 　　 0 false 表明为透明的像素部分创建可见的投影 　　 5.FlipH属性 　　 语法：filter: fliph() 功能：它是一个水平翻转对象的滤镜属性。它为当前的对象产生一个滤镜。以此来创建翻转效果。 　　 6.FlipV属性 　　 语法：filter: flipv() 　　 功能：它是一个垂直翻转对象的滤镜属性。它为当前的对象产生一个滤镜。以此来创建翻转效果。 　　 7.Glow属性 　　 语法：filter: glow(color=color,strength=strength) 功能：用于使对象的边缘产生相似发光的效果。经过定义数值能够指定这种效果的颜色和力度等级。 　　 参数：color :指定发光的颜色。 strength: 用于指定表现强度。 1---255之间的任何整数。 　　 8.Gray属性 　　 语法：filter: gray() 　　 功能：把一副图片转换为黑白图。 　　 参数：彩色的图片可能含有24位色。也可能含有16位色。当使用此属性时，就能够下降图片的颜色信息。 　　 9.Invert属性 　　 语法：filter: invert() 功能：能够把对象的可视化属性所有翻转。其中包括色彩，饱和度和亮度值。就是平时所说的‘底片’或是‘页片’效果 　　 10.Mask属性 语法：filter: mask(color=color) 　　 功能：能够为对象创建一个覆盖的膜。就象带着有色眼镜看物体同样 11.Shadow属性 　　 语法：filter: shadow(color=color,direction=direction) 功能：能够在指定的方向创建物体的投影 　　 参数：color :投影的颜色 　　 direction :设置按照顺时针方向的投影方向。0表明垂直方向。 每45度为一个单位。默认为向左270度 　　 Shadow与Dropshadow区别： Shadow :依靠指定角度值能够任意投射阴影。这些阴影是对象原先部分的延伸。 Dropshadow:是依靠X方向和Y方向的偏移量来定义投影的。这些阴影实际上是对象的移动。 　　 12.Wave属性 　　 语法：filter: wave(add=add,freq=freq,lightstrength=lighstrength,phase=phase,stength=strength) 　　 功能：把对象按照垂直的波形样式打乱。 　　 参数：add: 表示是否要把对象按照波形样式打乱。默认true 　　 freq: 是波纹的频率，也就是指定在这个对象上面一共须要产生多少完整的波纹 　　 lightstrength: 能够对波纹加强光影的效果。0--100之间的整数值 　　 phase :用来设置正弦开始的偏移量。通用值为0，0---100之间。这个数值表明开始的偏移量取自波长的百分比 例如：phase的值为25，那么正弦波就从90度方向开始 　　 13.Xray属性 　　语法：filter: xray() 　　功能：可让对象反映出它的轮廓，并把这些轮廓增亮。 　　参数：所谓的X光效果都是黑白的灰度图，所以尽管代码中原先定义了其余色。可是通过X光处理后都变成了黑白的反色