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

來源:互聯網
上載者:User
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');

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.