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