帶你瞭解樣式表濾鏡(二)

來源:互聯網
上載者:User
濾鏡|樣式表   4、Glow 濾鏡
  文法:{filter:glow(color=屬性值1,strength=屬性值2);}

  作用:該濾鏡能夠在原對象周圍產生一種類似發光的效果,其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。

 參數:COLOR屬性是指定發光的顏色。

  STRENGTH則是發光強度的表現,也指光暈的厚度;其大小可以從1到255之間的任何整數來指定這個強度。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:glow(color=#880088,strength=3);}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>



5、Chroma 濾鏡
  文法:{filter:chroma(color=屬性值);}

  作用:該濾鏡能夠使映像中的某一顏色變成透明色。

  參數: COLOR屬性用來指定要變為透明色的顏色,通過該屬性值的設定,我們可以來過濾某圖象中的指定顏色。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:chroma(color=#0000fe);}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>



6、FlipH 濾鏡
  文法:{filter:filph}

  作用:該濾鏡能夠使HTML對象進行左右對換,一般適用於圖象對象。

  參數:該濾鏡沒有參數。



7、FlipV 濾鏡
  文法:{filter:filpv}

  作用:該濾鏡能夠使HTML對象進行上下對換,一般適用於圖象對象。

  參數:該濾鏡沒有參數。



8、Wave 濾鏡
  文法:{filter:wave(add=屬性值1,freq=屬性值2,lightstrength=屬性值3,phase=屬性值4,strength=屬性值5);}

  作用:該濾鏡能夠使被過濾對象產生正弦波形,從而能造成一種變形幻覺,其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的,一般適用於圖象對象。

  參數:add屬性是一個布爾值,它用來決定是否將原始圖象加入最後的效果之中。

  freq屬性是指波紋的頻率,也就是指定在對象上一共需要產生多少個完整的波紋。

  phase屬性是用來設定正弦波的位移量,也就是決定波形的形狀,其屬性值的取值範圍為從0到360度。

  lightstrength屬性可以對于波紋增強光影的效果,其取值範圍為從0到100。

  strength屬性是用來決定波形振幅的大小。



9、Shadow 濾鏡
  文法:{filter:shadow(color=屬性值1,direction=屬性值2);}

  作用:該濾鏡能夠使對象產生一種陰影製作效果,其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。

  參數:color屬性是用來設定陰影的顏色。

  direction屬性是用來設定投影的方向,取值範圍為0度到360度,其中0度代表垂直向上,然後每45度為一個單位,該屬性的預設值是向左的270度。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:shadow(color=#00ff00,direction=2);}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>



10、Mask 濾鏡
  文法:{filter:mask(color=屬性值);}

  作用:該濾鏡能夠利用一個HTML對象在另一個對象上產生映像的遮罩 ,可以為對象建立一個覆蓋於表面的膜,其效果就象戴者有色眼鏡看物體一樣,一般適用於圖象對象。

  參數:color屬性就是用來指定要被遮罩的顏色。



11、 Light 濾鏡
  文法:{Filter:light}

  作用:該濾鏡能夠使HTML對象產生一種類比光源的投射效果。一旦為對象定義了light濾鏡屬性,那麼就可以調用它的方法來設定或者改變屬性。light可用的方法有:

MoveLight   移動光源

Changcolor   改變光的顏色

AddAmbient   加入包圍的光源

AddPoint    加入點光源

Clear     清除所有的光源

AddCone     加入錐形光源

Changstrength 改變光源的強度

可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態設定光源,可能回產生一些意想不到的效果。

  參數:該濾鏡沒有參數。



12、Gray 濾鏡
  文法:{filter:gray}

  作用:該濾鏡能夠使一張彩色的圖片轉變為灰色調圖象,一般適用於圖象對象。

  參數:該濾鏡沒有附帶參數。



13、Invert 濾鏡
  文法:{filter:invert}

  作用:該濾鏡能夠使圖象產生照片底片的效果,一般適用於圖象對象。

  參數:該濾鏡沒有參數。



14、Xray 濾鏡
  文法:{filter:xray} 

  作用:該濾鏡能夠讓對象反映出它的輪廓並把這些輪廓加亮顯示,一般適用於圖象對象。

  參數:該濾鏡沒有參數。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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