当前位置: 移动技术网 > IT编程>网页制作>CSS > 推荐个Css的filter常用滤波器属性及语句大全

推荐个Css的filter常用滤波器属性及语句大全

2017年12月08日  | 移动技术网IT编程  | 我要评论
css的filter常用滤波器属性及语句大全 语法:style="filter:filtername(fparameter1, fparameter2...)"&
css的filter常用滤波器属性及语句大全

语法:style="filter:filtername(fparameter1, fparameter2...)" 
  (filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 

  滤镜说明: 

  alpha:设置透明层次 
  blur:创建高速度移动效果,即模糊效果 
  chroma:制作专用颜色透明 
  dropshadow:创建对象的固定影子 
  fliph:创建水平镜像图片 
  flipv:创建垂直镜像图片 
  glow:加光辉在附近对象的边外 
  gray:把图片灰度化 
  invert:反色 
  light:创建光源在对象上 
  mask:创建透明掩膜在对象上 
  shadow:创建偏移固定影子 
  wave:波纹效果 
  xray:使对象变得像被x光照射一样 

  1、滤镜:alpha 
  语法:style="filter:alpha(opacity=opacity, finishopacity=finishopacity,style=style, startx=startx,starty=starty,finishx=finishx,finishy=finishy)"  
  说明: 
  opacity:起始值,取值为0~100, 0为透明,100为原图。 
  finishopacity:目标值。 
  style:1或2或3 
  startx:任意值 
  starty:任意值 
  例子:filter:alpha(opacity="0",finishopacity="75",style="2")  

  2、滤镜:blur 
  语法:style="filter:blur(add = add, direction = direction, strength = strength)" 
  说明: 
  add:一般为1,或0。 
  direction:角度,0~315度,步长为45度。 
  strength:效果增长的数值,一般5即可。 
  例子:filter:blur(add="1",direction="45",strength="5") 

  3、滤镜:chroma 
  语法:style="filter:chroma(color = color)" 
  说明:color:#rrggbb格式,任意。 
  例子:filter:chroma(color="#ffffff") 

  4、滤镜:dropshadow 
  语法:style="filter:dropshadow(color=color, offx=offx, offy=offy, positive=positive)" 
  说明:color:#rrggbb格式,任意。 
  offx:x轴偏离值。 
  offy:y轴偏离值。 
  positive:1或0。 
  例子:filter:dropshadow(color="#6699cc",offx="5",offy="5",positive="1") 

  5、滤镜:fliph 
  语法:style="filter:fliph"  
  例子:filter:fliph  

  6、滤镜:flipv 
  语法:style="filter:flipv" 
  例子:filter:flipv  

  7、滤镜:glow 
  语法:style="filter:glow(color=color, strength=strength)" 
  说明: 
  color:发光颜色。 
  strength:强度(0-100) 
  例子:filter:glow(color="#6699cc",strength="5") 

  8、滤镜:gray 
  语法:style="filter:gray" 
  例子:filter:gray 

  9、滤镜:invert 
  语法:style="filter:invert" 
  例子:filter:invert 

  10、滤镜:mask 
  语法:style="filter:mask(color=color)" 
  例子:filter:mask (color="#ffffe0") 

  11、滤镜:shadow 
  语法:filter:shadow(color=color, direction=direction) 
  说明: 
  color:#rrggbb格式。 
  direction:角度,0-315度,步长为45度。 
  例子:filter:shadow (color="#6699cc", direction="135") 

  12、滤镜:wave 
  语法:filter: wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength) 
  说明: 
  add:一般为1,或0。 
  freq:变形值。 
  lightstrength:变形百分比。 
  phase:角度变形百分比。 
  strength:变形强度。 
  例子:filter: wave(add="0", phase="4", freq="5", lightstrength="5", strength="2") 

  13、滤镜:xray 
  语法:style="filter:xray"  
  例子:filter:xray 

14.颜色变化
语法:
filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr='#b5ccfa', endcolorstr='#b5ccfa');

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网