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