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

2019独角兽企业重金招聘Python工程师标准>>>

滤镜效果 描述
　　 -----------------------------------------------------
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光处理后都变成了黑白的反色

转载于:https://my.oschina.net/u/1047983/blog/130236