創(chuàng)建CSS樣式表的過程，就是對各種CSS屬性的配置過程，所以了解和掌控屬性配置很重要。在DW MX 2004的CSS樣式里包含了W3C規(guī)范定義的任何CSS1的屬性，把這些屬性分為：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等八個(gè)部分，如下圖：
DW MX 2004 實(shí)現(xiàn)CSS屬性配置功能是完全可視化的，無需編寫代碼。下面我們分別周詳講解。為了便于理解，從開始創(chuàng)建新的 CSS 樣式表說起：
注：您需對 DW MX 2004 程式初步了解，并打開他對照本教程進(jìn)行學(xué)習(xí)。假如您對 DW MX 2004 尚不熟悉，請瀏覽
【 DW MX 2004 簡體中文版入門教程
】。
【創(chuàng)建新的 CSS 樣式】
將插入點(diǎn)放在文檔中，然后執(zhí)行以下操作之一打開“新建 CSS 樣式”對話框：
在“CSS 樣式”面板（“窗口”>“CSS 樣式”）中，單擊面板右下角區(qū)域中的“新建 CSS 樣式”按鈕，如下圖：
在文本屬性檢查器中，從“樣式”彈出式菜單中選擇“管理樣式”，然后在出現(xiàn)的對話框中單擊“新建”。
在“相關(guān) CSS”選項(xiàng)卡（選擇“窗口”>“標(biāo)簽檢查器”，然后單擊“相關(guān) CSS”選項(xiàng)卡）中右鍵單擊，然后從上下文菜單中選擇“新建規(guī)則”。
選擇“文本”菜單>“CSS 樣式”>“新建(N)…”。
“新建 CSS 樣式”對話框隨即出現(xiàn)，如下圖：
定義您要?jiǎng)?chuàng)建的 CSS 樣式的類型：
若要?jiǎng)?chuàng)建可作為 class 屬性應(yīng)用于文本范圍或文本塊的自定義樣式，請選擇“創(chuàng)建自定義樣式 (Class)”，然后在“名稱”文本框中輸入樣式名稱。
注意：類名稱必須以句點(diǎn)開頭，并且能夠包含任何字母和數(shù)字組合（例如，.mycss）。假如您沒有輸入開頭的句點(diǎn)，DW MX 2004將自動(dòng)為您輸入。
若要重定義特定 HTML 標(biāo)簽的默認(rèn)格式，請選擇“重定義標(biāo)簽”，然后在“標(biāo)簽”字段中輸入一個(gè) HTML 標(biāo)簽，或從彈出式菜單中選擇一個(gè)標(biāo)簽。
若要為具體某個(gè)標(biāo)簽組合或任何包含特定 Id 屬性的標(biāo)簽定義格式，請選擇“使用 CSS 選擇器”，然后在“選擇器”文本框中輸入一個(gè)或多個(gè) HTML 標(biāo)簽，或從彈出式菜單中選擇一個(gè)標(biāo)簽。彈出式菜單中提供的選擇器（稱作偽類選擇器）包括 a:active、a:hover、a:link 和 a:visited。
選擇定義樣式的位置：
若要?jiǎng)?chuàng)建外部樣式表，請選擇“新建樣式表文檔”。
若要在當(dāng)前文檔中嵌入樣式，請選擇“僅對該文檔”。
單擊“確定”。
類 型 屬 性
【定義 CSS 類型屬性】使用“CSS 樣式定義”對話框中的“類型”類別能夠定義 CSS 樣式的基本字體和類型配置。
定義 CSS 樣式的類型配置：
在“CSS 樣式定義”對話框中，選擇“類型”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
字體：為樣式配置字體。DW MX 2004內(nèi)置6個(gè)系列的英文字體（如下圖）。
一般英文字體常常用“Arial， Helvetica， sans-serif”這個(gè)系列比較美觀，假如不用這些字體系列，您您能夠通過下拉列表最下面的“編輯字體列表”來創(chuàng)建新的字體系列。中文網(wǎng)頁默認(rèn)字體是宋體，一般留空即可。瀏覽器最好選擇用戶系統(tǒng)第一種字體顯示文本。兩種瀏覽器都支持字體屬性。
大?。憾x文本大小。能夠通過選擇數(shù)字和度量單位選擇特定的大小，也能夠選擇相對大小。以像素為單位能夠有效地防止瀏覽器變形文本。
提示：CSS中長度的單位分絕對長度單位和相對長度單位：
絕對
長度
px：（象素）根據(jù)顯示器的分辨率來確定長度。
pt：（字號）根據(jù)windows系統(tǒng)定義的字號大小來確定長度。
in、cn、mm：（英寸、厘米、毫米）根據(jù)顯示的實(shí)際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。
相對
長度
em：當(dāng)前文本的尺寸。例如：{ font-size:2em}是指文字大小為原來的2倍。
ex：當(dāng)前字母“x”的高度，一般為字體尺寸的一半。
%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。
兩種瀏覽器都支持大小屬性。
樣式：將“正常”、“斜體”或“偏斜體”指定為字體樣式。默認(rèn)配置是“正常”。兩種瀏覽器都支持樣式屬性。
行高：配置文本所在行的高度。選擇“正常”自動(dòng)計(jì)算字體大小的行高，或輸入一個(gè)確切的值并選擇一種度量單位。比較直觀的寫法用百分比，例如180%是指行高等于文字大小的1.8倍。相對應(yīng)的CSS屬性是”line-height”。兩種瀏覽器都支持行高屬性。
修飾：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。正常文本的默認(rèn)配置是“無”。鏈接的默認(rèn)配置是“下劃線”。將鏈接配置設(shè)為無時(shí)，能夠通過定義一個(gè)特別的類刪除鏈接中的下劃線。這些效果能夠同時(shí)存在，將效果前的復(fù)選框選定即可。相對應(yīng)的CSS屬性是”text-decoration”。兩種瀏覽器都支持修飾屬性。
粗細(xì)：對字體應(yīng)用特定或相對的粗體量。“正常”等于 400；“粗體”等于 700。相對應(yīng)的CSS屬性是”font-weight”。兩種瀏覽器都支持粗細(xì)屬性。
變量：配置文本的小型大寫字母變量。DW MX 2004不在“文檔”窗口中顯示該屬性。Internet Explorer 支持變量屬性，但 Netscape Navigator 不支持。
大小寫：將選定內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋九渲脼槿看髮懟蛐憽煞N瀏覽器都支持大小寫屬性。
顏色：配置文本顏色。兩種瀏覽器都支持顏色屬性。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
背 景 屬 性
【定義 CSS 樣式背景屬性】使用“CSS 樣式定義”對話框的“背景”類別能夠定義 CSS 樣式的背景配置。能夠?qū)W(wǎng)頁中的任何元素應(yīng)用背景屬性。例如，創(chuàng)建一個(gè)樣式，將背景顏色或背景圖像添加到任何頁面元素中，比如在文本、表格、頁面等的后面。還能夠配置背景圖像的位置。
提示：本頁背景圖片固定，是【定義 CSS 樣式背景屬性】的效果。
定義背景配置：
在“CSS 樣式定義”對話框中，選擇“背景”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
背景顏色：配置元素的背景顏色。兩種瀏覽器都支持背景顏色屬性。
背景圖像：配置元素的背景圖像。兩種瀏覽器都支持背景圖像屬性。
重復(fù)：定義是否重復(fù)連同怎樣重復(fù)背景圖像。兩種瀏覽器都支持重復(fù)屬性。
“不重復(fù)”在元素開始處顯示一次圖像。
“重復(fù)”在元素的后面水平和垂直平鋪圖像。
“橫向重復(fù)”和“縱向重復(fù)”分別顯示圖像水平帶區(qū)和垂直帶區(qū)。圖像被剪輯以適合元素的邊界。
附件：確定背景圖像是固定在他的原始位置還是隨內(nèi)容一起滾動(dòng)。注意，某些瀏覽器可能將“固定”選項(xiàng)視為“滾動(dòng)”。Internet Explorer 支持該選項(xiàng)，但 Netscape Navigator 不支持。
水平位置：和垂直位置指定背景圖像相對于元素的初始位置。這能夠用于將背景圖像和頁面中央垂直和水平對齊。假如附件屬性為“固定”，則位置相對于“文檔”窗口而不是元素。Internet Explorer支持該屬性，但 Netscape Navigator 不支持。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
區(qū) 塊 屬 性
【定義 CSS 樣式區(qū)塊屬性】使用“CSS 樣式定義”對話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對齊配置。下列兩組表格為文本定義區(qū)塊屬性前后對比：
原文本未定義區(qū)塊屬性
【定義CSS樣式區(qū)塊屬性】
定義區(qū)塊屬性后效果
【定義CSS樣式區(qū)塊屬性】
原文本未定義區(qū)塊
使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。
定義區(qū)塊后效果（參數(shù)見下圖）
使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。
定義區(qū)塊配置：在“CSS樣式定義”對話框中，選擇“區(qū)塊”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
單詞間距：配置單詞的間距。若要配置特定的值，請?jiān)趶棾鍪讲藛沃羞x擇“值”，然后輸入一個(gè)數(shù)值。在第二個(gè)彈出式菜單中，選擇度量單位。
注意：能夠指定負(fù)值，但顯示取決于瀏覽器。Dreamweaver 不在“文檔”窗口中顯示該屬性。
字母間距：增加或減小字母或字符的間距。若要減少字符間距，請指定一個(gè)負(fù)值（例如 -4）。字母間距配置覆蓋對齊的文本配置。Internet Explorer 4 和更高版本連同 Netscape Navigator 6 支持“字母間距”屬性。
垂直對齊：指定應(yīng)用他的元素的垂直對齊方式。僅當(dāng)應(yīng)用于 <img> 標(biāo)簽時(shí)，Dreamweaver 才在“文檔”窗口中顯示該屬性。
文本對齊：配置元素中的文本對齊方式。兩種瀏覽器都支持“文本對齊”屬性。
文本縮進(jìn)：指定第一行文本縮進(jìn)的程度。能夠使用負(fù)值創(chuàng)建凸出，但顯示取決于瀏覽器。僅當(dāng)標(biāo)簽應(yīng)用于塊級元素時(shí)，Dreamweaver 才在“文檔”窗口中顯示該屬性。兩種瀏覽器都支持“文本縮進(jìn)”屬性。
空格：確定怎樣處理元素中的空白。從下面三個(gè)選項(xiàng)中選擇：“正常”收縮空白；“保留”的處理方式即保留任何空白，包括空格、制表符和回車；“不換行”指定僅當(dāng)碰到 br 標(biāo)簽時(shí)文本才換行。Dreamweaver 不在“文檔”窗口中顯示該屬性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”屬性。
顯示：指定是否顯示連同怎樣顯示元素。“無”關(guān)閉他被指定給的元素的顯示。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
方 框 屬 性
【定義 CSS 樣式方框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的方框（又稱盒子）類別能夠?yàn)榭刂圃卦陧撁嫔系姆胖梅绞降臉?biāo)簽和屬性定義配置。能夠在應(yīng)用填充和邊距配置時(shí)將配置應(yīng)用于元素的各個(gè)邊，也能夠使用“全部相同”配置將相同的配置應(yīng)用于元素的任何邊。
定義元素在頁面上的放置方式：在“CSS 樣式定義”對話框中，選擇“方框”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
寬和高：配置元素的寬度和高度。寬和高定義的對象多為圖片，表格，層等。
浮動(dòng)：配置元素浮動(dòng)方式（如文本、層、表格等）。其他元素按通常的方式環(huán)繞在浮動(dòng)元素的周圍。 兩種瀏覽器都支持浮動(dòng)屬性。
這是配置浮動(dòng)效果的演示。定義表格浮動(dòng)（左對齊），文本自動(dòng)排列在該表格的右側(cè)。
清除：不允許元素的浮動(dòng)。左對齊：表示不允許左邊有浮動(dòng)對象。右對齊：表示不允許右邊有浮動(dòng)對象。兩者：表示允許兩邊都能夠有浮動(dòng)對象。無：不允許有浮動(dòng)對象。兩種瀏覽器都支持“清除”屬性。
填充：指定元素內(nèi)容和元素邊框（假如沒有邊框，則為邊距）之間的間距。取消選擇“全部相同”選項(xiàng)可配置元素各個(gè)邊的填充。
全部相同：將相同的填充屬性配置為他應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
邊界：指定一個(gè)元素的邊框（假如沒有邊框，則為填充）和另一個(gè)元素之間的間距。僅當(dāng)應(yīng)用于塊級元素（段落、標(biāo)題、列表等）時(shí)，DW MX 2004才在“文檔”窗口中顯示該屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊距。
全部相同：將相同的邊距屬性配置為他應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
邊 框 屬 性
【定義 CSS 樣式邊框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的“邊框”類別能夠定義元素周圍的邊框的配置（如寬度、顏色和樣式）。
提示：本頁為邊框進(jìn)行了配置 （樣式：點(diǎn)劃線 寬度：2px 顏色：#FF0000）
配置邊框樣式：
在“CSS 樣式定義”對話框中，選擇“邊框”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
樣式：配置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。DW MX 2004在“文檔”窗口中將任何樣式呈現(xiàn)為實(shí)線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊框樣式。
全部相同：將相同的邊框樣式屬性配置應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
寬度：配置元素邊框的粗細(xì)。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊框?qū)挾取?div style="height:15px;">
全部相同：將相同的邊框?qū)挾扰渲脩?yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
顏色：配置邊框的顏色。能夠分別配置每個(gè)邊的顏色，但顯示取決于瀏覽器。取消選擇“全部相同”可配置元素各個(gè)邊的邊框顏色。全部相同：將相同的邊框顏色配置應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
列 表 屬 性
【定義 CSS 樣式列表屬性】 “CSS 樣式定義”對話框的“列表”類別為列表標(biāo)簽定義列表配置（如項(xiàng)目符號大小和類型）。
定義列表樣式：
在“CSS 樣式定義”對話框中，選擇“列表”（如下圖），然后選擇所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
類型：配置項(xiàng)目符號或編號的外觀。兩種瀏覽器都支持“類型”。
項(xiàng)目符號圖像：能夠?yàn)轫?xiàng)目符號指定自定義圖像。單擊“瀏覽”選擇圖像或鍵入圖像的路徑。
位置：配置列表項(xiàng)文本是否換行和縮進(jìn)連同文本是否換行到左邊距。
列表屬性配置應(yīng)用舉例如下：
圓點(diǎn)符號
數(shù)字編號
圖像符號
CSS樣式表屬性分為：
類型；
背景；
區(qū)塊；
方框；
邊框；
列表；
定位；
擴(kuò)展；
CSS樣式表屬性分為： 類型；
背景；
區(qū)塊；
方框；
邊框；
列表；
定位；
擴(kuò)展；
CSS樣式表屬性分為： 類型；
背景；
區(qū)塊；
方框；
邊框；
列表；
定位；
擴(kuò)展；
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
定 位 屬 性
【定義 CSS 樣式定位屬性】 “定位”樣式屬性使用“層”最好選擇參數(shù)中定義層的默認(rèn)標(biāo)簽，將標(biāo)簽或所選文本塊更改為新層。
配置層定位屬性：
在“CSS 樣式定義”對話框中，選擇“定位”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
類型：確定瀏覽器應(yīng)怎樣來定位層。
絕對：使用“定位”框中輸入的坐標(biāo)（相對于頁面左上角）來放置層。
相對：使用“定位”框中輸入的坐標(biāo)（相對于對象在文檔的文本中的位置）來放置層。該選項(xiàng)不顯示在“文檔”窗口中。
靜態(tài)：將層放在他在文本中的位置。
顯示：確定層的初始顯示條件。假如不指定可見性屬性，則默認(rèn)情況下大多數(shù)瀏覽器都繼承父級的值。選擇以下可見性選項(xiàng)之一：
繼承：繼承層父級的可見性屬性。假如層沒有父級，則他將是可見的。
可見：顯示該層的內(nèi)容，而不管父級的值是什么。
隱藏：隱藏這些層的內(nèi)容，而不管父級的值是什么。
Z 軸：確定層的堆疊順序。編號較高的層顯示在編號較低的層的上面。值能夠?yàn)檎?，也能夠?yàn)樨?fù)。（注：使用“層”面板更改層的堆疊順序更容易。）
溢出（僅限于 CSS 層）：確定在層的內(nèi)容超出他的大小時(shí)將發(fā)生的情況。這些屬性控制怎樣處理此擴(kuò)展，如下所示：
可見：增加層的大小，使他的任何內(nèi)容均可見。層向右下方擴(kuò)展。
隱藏：保持層的大小并剪輯任何超出的內(nèi)容。不提供任何滾動(dòng)條。
滾動(dòng)：在層中添加滾動(dòng)條，不論內(nèi)容是否超出層的大小。專門提供滾動(dòng)條可避免滾動(dòng)條在動(dòng)態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。該選項(xiàng)不顯示在“文檔”窗口中，并且僅適用于支持滾動(dòng)條的瀏覽器。Internet Explorer 和 Netscape Navigator 6 支持此屬性。
自動(dòng)：使?jié)L動(dòng)條僅在層的內(nèi)容超出他的邊界時(shí)才出現(xiàn)。該選項(xiàng)不顯示在“文檔”窗口中。
定位：指定層的位置和大小。瀏覽器怎樣解釋位置取決于“類型”配置。假如層的內(nèi)容超出指定的大小，則大小值被覆蓋。
位置和大小的默認(rèn)單位是像素。對于 CSS 層，還能夠指定下列單位：pc（十二點(diǎn)活字）、pt（點(diǎn)）、in（英寸）、mm（毫米）、cm（厘米）、(ems)、(exs) 或 %（父級值的百分比）?？s寫必須緊跟在值之后，中間不留空格：例如，3mm。
剪輯：定義層的可見部分。假如指定了剪輯區(qū)域，能夠通過腳本語言（如 javascript）訪問他，并操作屬性以創(chuàng)建像擦除這樣的特別效果。通過使用“改變屬性”行為能夠配置這些擦除效果。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
擴(kuò) 展 屬 性
【定義 CSS 樣式擴(kuò)展屬性】“擴(kuò)展”樣式屬性包括過濾器、分頁和光標(biāo)選項(xiàng)，他們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。
指定擴(kuò)展屬性：
在“CSS 樣式定義”對話框中，選擇“擴(kuò)展”（如下圖），然后配置所需的樣式屬性。
請注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
分頁：在打印期間在樣式所控制的對象之前或之后強(qiáng)行分頁。選擇要在彈出式菜單中配置的選項(xiàng)。此選項(xiàng)不受任何 4.0 版本瀏覽器的支持，但可能受未來的瀏覽器的支持。
屬 性
說 明
hand
手形
crosshair
精確定位“＋”字
text
文本“I”形
wait
等待
default
默認(rèn)光標(biāo)
help
幫助
e-resize
箭頭朝右方
ne-resize
箭頭朝右上方
n-resize
箭頭朝上方
nw-resize
箭頭朝左上方
w-resize
箭頭朝左方
sw-resize
箭頭朝左下方
s-resize
箭頭朝下方
se-resize
箭頭朝右下方
auto
自動(dòng) 按照默認(rèn)狀態(tài)改變
光標(biāo)：位于“視覺效果”下的“光標(biāo)”選項(xiàng)，是光標(biāo)顯示屬性配置。當(dāng)指針位于樣式所控制的對象上時(shí)改變指針圖像。選擇彈出式菜單（右圖）進(jìn)行配置。（左圖）是他的周詳列表和相關(guān)說明。
過濾器：又稱 CSS濾鏡，對樣式所控制的對象應(yīng)用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性，頁面才變得更加漂亮。從“過濾器”彈出式菜單中選擇一種效果并視具體需要加以配置。各種 CSS 濾鏡屬性的周詳介紹請從導(dǎo)航條選擇“濾鏡屬性”按鈕瀏覽。
濾鏡 概 述
過濾器：又稱 CSS濾鏡，對樣式所控制的對象應(yīng)用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性，頁面才變得更加漂亮。DW MX 2004 擴(kuò)展類過濾器嵌入16項(xiàng)樣式屬性（如下圖），您能夠根據(jù)您的需要從“過濾器”彈出式菜單中選擇并加以配置。
濾 鏡
說 明
Alpha
透明的漸進(jìn)效果
BlendTrans
淡入淡出效果
Blur
風(fēng)吹模糊的效果
Chroma
指定顏色透明
DropShadow
陰影效果
FlipH
水平翻轉(zhuǎn)
FlipV
垂直翻轉(zhuǎn)
Glow
邊緣光暈效果
Gray
彩色圖片變灰度圖
Invert
底片的效果
Light
模擬光源效果
Mask
矩形遮罩效果
RevealTrans
動(dòng)態(tài)效果
Shadow
輪廓陰影效果
Wave
波浪扭曲變形效果
Xray
X光照片效果
左表列出16項(xiàng)濾鏡及說明，現(xiàn)在再進(jìn)一步介紹一下：
“Alpha”濾鏡：這個(gè)名字，在Flash和Photoshop經(jīng)常見到。他們的作用基本類似，就是把一個(gè)目標(biāo)元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個(gè)元素的透明度。
BlendTrans濾鏡：他的功能也比較單一，就是產(chǎn)生一種精細(xì)的淡入淡出的效果。
Blur濾鏡：把他加載到文字上，產(chǎn)生風(fēng)吹模糊的效果，類似立體字，這將為您在網(wǎng)頁上制作立體字標(biāo)題帶來了方便。也能夠把Blur濾鏡加載到圖片上，能達(dá)到用圖象處理軟件制作的效果。
“DropShadow”顧名思義就是添加對象的陰影效果。他的實(shí)際效果看上去就象是原來的對象離開了頁面，然后在頁面上顯示出該對象的投影。
CSS的無參數(shù)濾鏡共有六個(gè)（FlipH、FlipV、Invert、Xray、Gray和Light），雖然他們沒有參數(shù)，相對來講，靈活性要差點(diǎn)，但他們用起來更方便，效果也相當(dāng)明顯。用他們能夠使文字或圖片翻轉(zhuǎn)、獲得圖片的“底片”效果，甚至能夠制作圖片的“X光片”效果。
glow濾鏡：使對象的邊緣就產(chǎn)生類似發(fā)光的效果，glow”濾鏡制作這種效果操作很簡便。
Mask濾鏡：能夠?yàn)榫W(wǎng)頁上的元件對象作出一個(gè)矩形遮罩效果。
wave濾鏡：他的作用是把對象按照垂直的波形樣式扭曲的特別效果。
Light濾鏡：能產(chǎn)生一個(gè)模擬光源的效果，配合使用一些簡單的Javascrpt，使對象產(chǎn)生奇特光照的效果。
RevealTrans動(dòng)態(tài)濾鏡：是個(gè)神奇的濾鏡，他能產(chǎn)生23種動(dòng)態(tài)效果，還能在23種動(dòng)態(tài)效果中隨機(jī)抽用其中的一種。用他來進(jìn)行網(wǎng)頁之間的動(dòng)態(tài)轉(zhuǎn)換，很方便。
ALPHA 屬性
【Alpha濾鏡屬性】這個(gè)名字，在Flash和Photoshop經(jīng)常見到。他們的作用基本類似，就是把一個(gè)目標(biāo)元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個(gè)元素的透明度。通過指定坐標(biāo)，能夠指定點(diǎn)、線、面的透明度。由于“Alpha”濾鏡的參數(shù)多，我們先來看一下下邊的表格：
參數(shù)名
效 果 說 明
取值說明
Opacity
不透明的程度，百分比。 取值0～100
FinishOpacity
能夠制作出透明漸變的效果。 取值0～100
Style
指定漸變的顯示形狀。 0：沒有漸變；1：線性漸變；
2：圓形漸變；3：矩形輻射。
StartX
漸變開始的 X 坐標(biāo)值
StartY
漸變開始的 Y 坐標(biāo)值
FinishX
漸變結(jié)束的 X 坐標(biāo)值
FinishY
漸變結(jié)束的 Y 坐標(biāo)值
“opacity”：代表透明度程度。范圍是從0~100，他們其實(shí)是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
“finishopacity”：是個(gè)可選參數(shù)，假如想要配置漸變的透明效果，就能夠使用他們來指定結(jié)束時(shí)的透明度。范圍也是0 到 100。
“style”：指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。
“StartX”和“StartY”：代表漸變透明效果的開始X和Y坐標(biāo)。
“FinishX”和“FinishY”：代表漸變透明效果結(jié)束X和Y坐標(biāo)。
請看下面的演示：
Alpha 屬性值：
Alpha(Opacity=50, FinishOpacity=100, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
Style 加載在單元格<td>上顯示效果如下圖：
原圖
style=0
style=1
style=2
style=3
Style加載在圖片上顯示效果如下圖：
原圖
style=0
style=1
style=2
style=3
Style加載在文字上顯示效果如下圖：
Alpha(Opacity=30,Style=0)
這是文字透明效果演示
BLENDTRANS 屬性
【BlendTrans屬性】淡入淡出的效果濾鏡，能產(chǎn)生極精細(xì)的圖片轉(zhuǎn)換效果。
制作說明：
BlendTrans濾鏡功能也比較單一，只有一個(gè)參數(shù)：Duration（變換時(shí)間）。需要借助于javascript來調(diào)用他的方法來實(shí)現(xiàn)轉(zhuǎn)換功能。使用BlendTrans濾鏡，首先您要準(zhǔn)備幾張寬高尺寸相同的圖片，并分別命名，保存在圖像目錄下，如：images/*.jpg。假如用4幅的話，分別取名為：blen1.jpg； blen2.jpg； blen3.jpg；blen4.jpg。（用其他名稱也能夠，但下邊的javascript配置要相應(yīng)調(diào)整。）
制作方法：
1、制作一個(gè)BlendTrans濾鏡，取名為“myblen"，Duration配置為“3"（即轉(zhuǎn)換時(shí)間為3秒），濾鏡配置好后，在網(wǎng)頁源代碼的< head >和< /head >之間將有下面這樣一段代碼：
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)
}
-- >
< /style >
2、插入第一張圖片（本例圖片為570X150像素），在圖片的屬性面板上給圖片加個(gè)名稱：myimg
3、把BlendTrans濾鏡加載到圖片上，這時(shí)圖片的“img"標(biāo)記的代碼是這樣的：<img src="images/blen1.jpg" name="myimg" width="570" height="150" class="myblen" id="myimg">；
4、在網(wǎng)頁的源代碼< head >和< /head >之間插入下面這段javascript程式：
<script language="javascript" >
<!--
function img(len)
{
this.length=len;
}
imgname=new img(4);
imgname[0]="images/blen1.jpg";
imgname[1]="images/blen2.jpg";
imgname[2]="images/blen3.jpg";
imgname[3]="images/blen4.jpg";
var i=1;
function play()
{
if (i==3)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply();
myimg.src=imgname[i];
myimg.filters[0].play();
mytimeout=setTimeout("play()",6000);
}
-->
</script >
5、在網(wǎng)頁源代碼的< body >加入這樣的一句代碼：onload="play()"。
配置完成，點(diǎn)F12預(yù)覽效果
