• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> html >> 利用CSS濾鏡讓網(wǎng)頁(yè)效果更有風(fēng)格

利用CSS濾鏡讓網(wǎng)頁(yè)效果更有風(fēng)格

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2010-11-29
• 在進(jìn)行網(wǎng)站設(shè)計(jì)的時(shí)候，很多的效果并不用在photoshop里進(jìn)行設(shè)計(jì)！中國(guó)WebSite網(wǎng)認(rèn)為完全可以在網(wǎng)頁(yè)里可以用javascript來實(shí)現(xiàn)也可以用css濾鏡便可以方便的設(shè)計(jì)出來！
  語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
  （Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數(shù)）　
  濾鏡說明：
  alpha：設(shè)置透明層次
  blur：創(chuàng)建高速度移動(dòng)效果，即模糊效果
  chroma：制作專用顏色透明
  DropShadow：創(chuàng)建對(duì)象的固定影子
  FlipH：創(chuàng)建水平鏡像圖片
  FlipV：創(chuàng)建垂直鏡像圖片
  glow：加光輝在附近對(duì)象的邊外
  gray：把圖片灰度化
  invert：反色
  light：創(chuàng)建光源在對(duì)象上
  mask：創(chuàng)建透明掩膜在對(duì)象上
  shadow：創(chuàng)建偏移固定影子
  wave：波紋效果
  Xray：使對(duì)象變得像被x光照射一樣
  1、濾鏡：Alpha
  語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"　
  說明：
  Opacity：起始值，取值為0～100, 0為透明，100為原圖。
  FinishOpacity：目標(biāo)值。
  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度，步長(zhǎng)為45度。
  Strength：效果增長(zhǎng)的數(shù)值，一般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：發(fā)光顏色。
  Strength：強(qiáng)度(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度，步長(zhǎng)為45度。
  例子：filter:Shadow (Color="#6699CC", Direction="135")
  12、濾鏡：wave
  語法：filter: Wave(Add=add，F(xiàn)req=freq，LightStength=strength，Phase=phase，Strength=strength)
  說明：
  Add：一般為1，或0。
  Freq：變形值。
  LightStrength：變形百分比。
  Phase：角度變形百分比。
  Strength：變形強(qiáng)度。
  例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
  13、濾鏡：Xray
  語法：STYLE="filter:Xray"　
  例子：filter:Xray
  希望大家能用好css濾鏡，做出自己喜歡的效果來！
• 基于 HTML5 的人臉識(shí)別技術(shù) -創(chuàng)新互聯(lián) :上一篇
  html直接鍵入多個(gè)空格只能顯示一個(gè)空格占位原因 :下一篇