首頁 > web前端 > css教學 > CSS濾鏡參考_CSS/HTML

CSS濾鏡參考_CSS/HTML

WBOY
發布: 2016-05-16 12:11:23
原創
1331 人瀏覽過

語法:STYLE="filter:filtername(fparameter1, fparameter2...)"
  (Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數)
script 語法:HTMLElement.filters .filterName.fParameter=value;

  濾鏡說明:

  Alpha:設定透明層次
  blur:創造高速度移動效果,即模糊效果
  Chroma:製作專用顏色透明
  DropSha像:建立物件的固定顏色

  FlipV:創建垂直鏡像圖片
  glow:加光輝在附近物件的邊外
  gray:把圖片灰度化
  invert:反色
  mask:創建透明掩膜在物件上
  shadow:創建偏移固定影子
  wave:波紋效果
  Xray:使物件變得像被x光照射一樣
  1、濾鏡:Alpha
  語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishXYish

  說明:

  Opacity:起始值,取值為0~100, 0為透明,100為原圖。
  FinishOpacity:目標值。
  Style:1或2或3
  StartX:任意值
  StartY:任意值
  範例:filter:Alpha(Opacity="0",FinishOpacity="75" )

  2、濾鏡:blur
  語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

    〜> 。

  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)"
 r :Y=offY, Positive=positive)"

Colrrg :任意說明。

  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)

  說明:

  Colrror:#g#ggxgr#grr開格式。
  Direction:角度,0-315度,步長為45度。
  範例:filter:Shadow (Color="#6699CC", Direction="135")

  12、濾鏡:wave
  語法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)  『『『〟〜〟〜〟〜〟〜〟〜〟〜〟〜〟〜〟〜〟〜〟〟〜〟〜〟〟〜〟〜〟〜〟〟〜都則都是一般說明: 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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板