CSS（Cascading Style Sheets) 中文翻譯為 層疊樣式表單，簡(jiǎn)稱(chēng)樣式單。它是近幾年才發(fā)展起來(lái)的新技術(shù)，1998年5月12日，Cascading Style Sheets,level 2 成為了W3C 的新標準。同時(shí),”W3C CoreStyles "和CSS2 Validation Service" 以及“CSS Test Suite" 宣布成立。它是一組樣式，樣式中的屬性在HTML元素中依次出現，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標志（TAG）里，也可以在外部附加文檔作為外加文檔。此時(shí)，一個(gè)樣式表單可以作用于多個(gè)頁(yè)面---甚至整個(gè)站點(diǎn)，因此具有更好的易用性和擴展性。我個(gè)人認為CSS好比是HTML語(yǔ)言的PLUSIN（插件），插件的功能大家應該知道，就是壯大原有的功能。你可以精確的控制主頁(yè)里的每一個(gè)元素，比如一個(gè)字，用CSS你可以給它控制它的前景色、背景色、背景圖片、在頁(yè)面的精確位置，四周加入邊框等?？梢哉f(shuō)CSS的功能是無(wú)比的強大。W3C 也極力向世界推廣這一先進(jìn)技術(shù)。
如下列：前景色為蘭色，背景色為銀色。
前景色為蘭色，背景色為銀色
如果你使用frontpage 98 的話(huà)，過(guò)程很簡(jiǎn)單，具體如下：
1、先選擇要控制的文字，被選擇了的文字以反白顯示，如下：
然后在其上擊鼠標右鍵，單擊“字體屬性”后彈出如下圖：
單擊左下腳”樣式(S)……“后出現如下圖：
單擊”顏色“，選擇前景色和背景色；
單擊”字體“選擇主字體和大小
然后按”確定“就搞定了。
也許很多人對CSS的一般用途熟悉，但是可能只有少數人知道CSS里面竟然還有象PHOTOSHOP里一樣的濾鏡。是不是有點(diǎn)驚訝。^_^ 不要著(zhù)急，請跟著(zhù)我去揭開(kāi)其中的奧秘！二、
隨著(zhù)網(wǎng)頁(yè)設計技術(shù)的發(fā)展，人們已經(jīng)不滿(mǎn)足于原有的一些HTML標記，而是希望能夠為頁(yè)面添加一些多媒體屬性，例如濾鏡的和漸變的效果。CSS技術(shù)的飛快發(fā)展使這些需求成為了現實(shí)。從現在開(kāi)始我要為大家介紹一個(gè)新的CSS擴展部分：CSS濾鏡屬性（Filter Properties)。使用這種技術(shù)可以把可視化的濾鏡和轉換效果添加到一個(gè)標準的HTML元素上，例如圖片、文本容器、以及其他一些對象。對于濾鏡和漸變效果，前者是基礎，因為后者就是濾鏡效果的不斷變化和演示更替。當濾鏡和漸變效果結合到一個(gè)基本的SCRIPT小程序中后，網(wǎng)頁(yè)設計者就可以擁有一個(gè)建立動(dòng)態(tài)交互文檔的強大工具。也就是CSS FILTER+ SCRIPT， 這就說(shuō)明想要建立動(dòng)態(tài)的文檔還要一些SCRIPT （腳本語(yǔ)言）的基礎。
正常的圖片 <img src="flower1.jpg" > 模糊效果處理后的圖片，哪個(gè)更漂亮，你覺(jué)得呢！達到這個(gè)效果很容易。僅僅是加了點(diǎn)東東。
<img src="flower1.jpg" style="filter:blur(strength=50)">
自己試試，看看有假沒(méi)有！不要你用什么Photoshop之類(lèi)的圖象軟件，簡(jiǎn)簡(jiǎn)單單語(yǔ)法如下：
filter:filtername(parameters) 既 filter:濾鏡名稱(chēng)（參數）
可視化濾鏡屬性只能用在HTML控件元素上。所謂的HTML空間元素就是它們在頁(yè)面上定義了一個(gè)矩形空間，瀏覽器的窗口可以顯示這些空間。下面列出了HTML合法的控件和它們的說(shuō)明。
備注：可惜只有IE4.0以上支持，如果是別的瀏覽器，那就.......
元素 說(shuō)明
BODY 網(wǎng)頁(yè)文檔的主體元素，所有的可見(jiàn)范圍都在<BODY>元素內
BUTTON 表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式
DIV 定義了網(wǎng)頁(yè)上的一個(gè)區域，這個(gè)區域的高度、寬度或者絕對位置都是以知的
IMG 圖片元素，通過(guò)指定“src"屬性來(lái)指定圖片的來(lái)源
INPUT 輸入表單域
MARQUEE 移動(dòng)字幕效果
SPAN 定義了網(wǎng)頁(yè)上的一個(gè)區域，這個(gè)區域的高度、寬度或者絕對位置都是以知的
TABLE 表格
TD 表格數據單元格
TEXTAREA 文本區域
TFOOT 多行輸入文本框
TH 表格標題單元格
THEAD 表格標題
TR 表格行
IE4.0以上支持的濾鏡屬性表
濾鏡效果 描述
Alpha 設置透明度
Blru 建立模糊效果
Chroma 把指定的顏色設置為透明
DropShadow 建立一種偏移的影象輪廓，即投射陰影
FlipH 水平反轉
FlipV 垂直反轉
Glow 為對象的外邊界增加光效
Grayscale 降低圖片的彩色度
Invert 將色彩、飽和度以及亮度值完全反轉建立底片效果
Light 在一個(gè)對象上進(jìn)行燈光投影
Mask 為一個(gè)對象建立透明膜
Shadow 建立一個(gè)對象的固體輪廓，即陰影效果
Wave 在X軸和Y軸方向利用正弦波紋打亂圖片
Xray 只顯示對象的輪廓
下面幾頁(yè)我們將詳細講述每種濾鏡的使用方法。
三、
1、Alpha 濾鏡
語(yǔ)法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
"Alpha"屬性是把一個(gè)目標元素與背景混合。設計者可以指定數值來(lái)控制混合的程度。這種“與背景混合”通俗地說(shuō)就是一個(gè)元素的透明度。通過(guò)指定坐標，可以指定點(diǎn)、線(xiàn)、面的透明度。他們的參數含義分別如下：
“opacity"代表透明度水準。默認的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說(shuō)，0代表完全透明，100代表完全不透明。”finishopacity"是一個(gè)可選參數，如果想要設置漸變的透明效果，就可以使用他們來(lái)指定結束時(shí)的透明度。范圍也是0 到 100。“style" 參數指定了透明區域的形狀特征。其中0代表統一形狀、1代表線(xiàn)形、2代表放射狀、3代表長(cháng)方形。”STARTX“和”STARTY“代表漸變透明效果的開(kāi)始X和Y坐標。”FINISHX“和”FINISHY“代表漸變透明效果結束X和Y 的坐標。
效果如下：
2、Blur 濾鏡
語(yǔ)法：對于HTML：{ilter:blur(add=add,direction=direction,strength=strength)}
對于Script語(yǔ)言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油畫(huà)上迅速劃過(guò)時(shí)，畫(huà)面就會(huì )變得模糊。”Blur"就是產(chǎn)生同樣的模糊效果。
“ADD”參數是一個(gè)布爾判斷“TRUE（默認）”或者“FALSE”。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時(shí)針的方向進(jìn)行的，“DIRECTION”參數用來(lái)設置模糊的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認值是向左的270度。“STRENGTH“值只能使用整數來(lái)指定，她代表有多少像素的寬度將受到模糊影響。默認是5個(gè)。對于網(wǎng)頁(yè)上的字體，如果設置他的模糊”ADD=1“，那么這些字體的效果會(huì )非常好看的。如下：
filter:blur(add=ture,direction=135,strength=10）
我向你飛，雨溫柔地綴！
3、FlipH, FlipV 濾鏡
語(yǔ)法：{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉，具體如下：
4、Chroma 濾鏡
語(yǔ)法：{filter:chroma(color=color)}
使用”Chroma"屬性可以設置一個(gè)對象中指定的顏色為透明色，參數COLOR即要透明的顏色。下面是蘭色文字，然后用Chroma 濾鏡過(guò)濾掉蘭色，就成了下面的樣子。
filter:chroma(color=blue)
滴水檐坊
5、DropShadow 濾鏡
語(yǔ)法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
“DropShaow"顧名思義就是添加對象的陰影效果。其工作原理是建立一個(gè)偏移量，加上較深。"Color"代表投射陰影的顏色，"offx"和"offy"分別是X方向和Y方向陰影的餓偏移量。"Positive"參數是一個(gè)布爾值，如果為“TRUE（非0）”，那么就為任何的非透明像素建立可見(jiàn)的投影。如果為“FASLE（0）”，那么就為透明的像素部分建立透明效果
正常文字 dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字
6、Glow 濾鏡
語(yǔ)法：{filter:glow(color=color,strength)}
當對一個(gè)對象使用"glow"屬性后，這個(gè)對象的邊緣就會(huì )產(chǎn)生類(lèi)似發(fā)光的效果。“COLOR”是指定發(fā)光的顏色，“STRENGTH”則是強度的表現，可以從1到255之間的任何整數來(lái)指定這個(gè)力度。
filter:glow(color=red,strength=10) 后的效果
滴水檐茶坊
filter:glow(color=#ffff00,strength=5) 后的效果
滴水檐茶坊
好象可以把PhotoShop踹到一邊了，是嗎？四、
7、Gray ,Invert,Xray 濾鏡
語(yǔ)法：{filter:gray} ,{filter:invert},{filter:xray}
Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對象的可視化屬性全部翻轉，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。
效果如下：
8、Light 濾鏡
語(yǔ)法：Filter{light}
這個(gè)屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那么就可以調用它的“方法(Method)"來(lái)設置或者改變屬性。“LIGHT"可用的方法有：
·AddAmbient 加入包圍的光源
·AddCone 加入錐形光源
·AddPoint 加入點(diǎn)光源
·Changcolor 改變光的顏色
·Changstrength 改變光源的強度
·Clear 清除所有的光源
·MoveLight 移動(dòng)光源
可以定義光源的虛擬位置，以及通過(guò)調整X軸和Y軸的數值來(lái)控制光源焦點(diǎn)的位置，還可以調整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動(dòng)態(tài)的設置光源，可能回產(chǎn)生一些意想不到的效果。后面幾頁(yè)會(huì )有具體范例。
9、Mask 濾鏡
語(yǔ)法：{filter:mask(color=color)}
使用"MASK"屬性可以為對象建立一個(gè)覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。
10、Shadow 濾鏡
語(yǔ)法：{filter:shadow(color=color,direction=direction)}
利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設置投影的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認值是向左的270度。
filter:shadow(color=red,direction=225)
filter:shadow(color=blue,direction=225)
filter:shadow(color=gray,direction=225)
效果分別如下：
Shadow 濾鏡 滴水檐茶坊制作
Shadow 濾鏡 滴水檐茶坊制作
Shadow 濾鏡 滴水檐茶坊制作
11、Wave 濾鏡 語(yǔ)法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 屬性把對象按垂直的波形樣式打亂。默認是“TRUE（非0）”，
“ADD”表示是否要把對象按照波形樣式打亂，
“FREQ”是波紋的頻率，也就是指定在對象上一共需要產(chǎn)生多少個(gè)完整的波紋，
“LIGHTSTRENGTH”參數可以對于波紋增強光影的效果，范圍0----100，
“PHASE”參數用來(lái)設置正弦波的偏移量。
“STRENGTH”代表振幅大小。
五、
上幾次給大家具體講了語(yǔ)法，下面我們來(lái)看幾個(gè)生動(dòng)的例子！下面這個(gè)程序是用light濾鏡模擬雷達屏幕，并且有一架飛機被發(fā)現。當然編這個(gè)程序要對script 比較熟悉，還要知道lighy濾鏡的屬性和方法。
1、
雷達屏幕在這漆黑的夜里，英雄，你能看到你的美女在哪里嗎？什么樣子看的清嗎，她的那顆熾熱跳動(dòng)的心你能感覺(jué)到嗎？ 可以說(shuō)本頁(yè)效果需要一定的JAVASCRIPT基礎，屬于CSS和JAVASCRIPT的高級運用。
2、
動(dòng)態(tài)光源演示-英雄救美女3、
Glow濾鏡六、應用：使照片半透明：
上幾次給大家具體講了語(yǔ)法，下面我們來(lái)看幾個(gè)生動(dòng)的例子！下面這個(gè)程序是用light濾鏡模擬雷達屏幕，并且有一架飛機被發(fā)現。當然編這個(gè)程序要對script 比較熟悉，還要知道lighy濾鏡的屬性和方法。 1、
雷達屏幕在這漆黑的夜里，英雄，你能看到你的美女在哪里嗎？什么樣子看的清嗎，她的那顆熾熱跳動(dòng)的心你能感覺(jué)到嗎？ 可以說(shuō)本頁(yè)效果需要一定的JAVASCRIPT基礎，屬于CSS和JAVASCRIPT的高級運用。
2、
動(dòng)態(tài)光源演示-英雄救美女3、
Glow濾鏡
