首頁  >  文章  >  web前端  >  推薦個Css的filter常用濾波器屬性及語句大全_基礎教學

推薦個Css的filter常用濾波器屬性及語句大全_基礎教學

WBOY
WBOY原創
2016-05-16 12:07:041543瀏覽

Css的filter常用濾波器屬性及語句大全

語法:STYLE="filter:filtername(fparameter1, fparameter2...)" 
  (Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡鏡的參數) 

  濾鏡說明: 

  Alpha:設定透明層次 
  blur:創造高速度移動效果,即模糊效果 
  Chroma:製作專用顏色透明>  DropShadow:創建對象的固定影子 
  FlipH:創建水平鏡像圖片 
  FlipV:創建垂直鏡像圖片 
  glow:加光輝在附近物件的邊外 
[ BR>  invert:反色 
  light:創建光源在物件上 
  mask:創建透明遮罩在物件上 
  shadow:建立偏移固定影子
   讓物件變得像被x光照射一樣 

  1、濾鏡:Alpha 
  語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=start 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="75" )  

  2、濾鏡:blur 
  語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength > 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, OXff 語法:STYLE="filter:DropShadow(Color=color, OXff=YoffX, OXff=Yoff 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"〠〠   文法>
  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" 
   文法:STYLE="filter:Invert" 
   範例
  10、濾鏡:mask 
  語法:STYLE="filter:Mask(Color=color)" 
  範例:filter:Mask (Color="#FFFFE0")

 11、 11、濾鏡:shadow 
  語法:filter:Shadow(Color=color, Direction=direction) 
  說明: 
  Color:#rrggbb格式。 
  Direction:角度,0-315度,步長為45度。
  範例:filter:Shadow (Color="#6699CC", Direction="135") 

  12、濾鏡:wave 
  語法:filter: Wave(Addq. ,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.MicrosoftG. =0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn