CSS滤镜及渐变 filter样式表属性 【转】.docVIP

CSS滤镜及渐变 filter样式表属性 【转】 CSS滤镜及渐变(filter样式表属性)【转】2010年11月24日星期三16：22滤镜效果描述 --- 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-10 0 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：