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光处理后都变成了黑白的反色

你可能感兴趣的:(CSS滤镜及渐变,(filter样式表属性))