帶你瞭解樣式表濾鏡(二)
來源:互聯網
上載者: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}
作用:該濾鏡能夠讓對象反映出它的輪廓並把這些輪廓加亮顯示,一般適用於圖象對象。
參數:該濾鏡沒有參數。