|
隨著網(wǎng)頁設(shè)計技術(shù)的發(fā)展，人們已經(jīng)不滿足于原有的一些HTML標(biāo)記，而是希望能夠為頁面添加一些多媒體屬性，例如濾鏡的和漸變的效果。CSS技術(shù)的飛快發(fā)展使這些需求成為了現(xiàn)實(shí)。從現(xiàn)在開始我要為大家介紹一個新的CSS擴(kuò)展部分：CSS濾鏡屬性（Filter Properties)。使用這種技術(shù)可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本容器、以及其他一些對象。對于濾鏡和漸變效果，前者是基礎(chǔ)，因為后者就是濾鏡效果的不斷變化和演示更替。當(dāng)濾鏡和漸變效果結(jié)合到一個基本的SCRIPT小程序中后，網(wǎng)頁設(shè)計者就可以擁有一個建立動態(tài)交互文檔的強(qiáng)大工具。也就是CSS FILTER+ SCRIPT， 這就說明想要建立動態(tài)的文檔還要一些SCRIPT （腳本語言）的基礎(chǔ)。
| 正常的圖片 img src="flower1.jpg" > |
模糊效果處理后的圖片，哪個更漂亮，你覺得呢！達(dá)到這個效果很容易。僅僅是加了點(diǎn)東東。
img src="flower1.jpg" style="filter:blur(strength=50)"> |
|
自己試試，看看有假沒有！不要你用什么Photoshop之類的圖象軟件，簡簡單單語法如下：
filter:filtername(parameters) 既 filter:濾鏡名稱（參數(shù)） |
 |
|
可視化濾鏡屬性只能用在HTML控件元素上。所謂的HTML空間元素就是它們在頁面上定義了一個矩形空間，瀏覽器的窗口可以顯示這些空間。下面列出了HTML合法的控件和它們的說明。
備注：可惜只有IE4.0以上支持，如果是別的瀏覽器，那就.......
| 元素 |
說明 |
| BODY |
網(wǎng)頁文檔的主體元素，所有的可見范圍都在BODY>元素內(nèi) |
| BUTTON |
表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式 |
| DIV |
定義了網(wǎng)頁上的一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的 |
| IMG |
圖片元素，通過指定“src"屬性來指定圖片的來源 |
| INPUT |
輸入表單域 |
| MARQUEE |
移動字幕效果 |
| SPAN |
定義了網(wǎng)頁上的一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的 |
| 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 |
為對象的外邊界增加光效 |
| Grayscale |
降低圖片的彩色度 |
| Invert |
將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果 |
| Light |
在一個對象上進(jìn)行燈光投影 |
| Mask |
為一個對象建立透明膜 |
| Shadow |
建立一個對象的固體輪廓，即陰影效果 |
| Wave |
在X軸和Y軸方向利用正弦波紋打亂圖片 |
| Xray |
只顯示對象的輪廓 | | 
