【定義 CSS 類型屬性】使用“CSS 樣式定義”對(duì)話框中的“類型”類別能夠定義 CSS 樣式的基本字體和類型配置。
定義 CSS 樣式的類型配置：
在“CSS 樣式定義”對(duì)話框中，選擇“類型”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
字體：為樣式配置字體。DW MX 2004內(nèi)置6個(gè)系列的英文字體（如下圖）。
一般英文字體常常用“Arial， Helvetica， sans-serif”這個(gè)系列比較美觀，假如不用這些字體系列，您您能夠通過下拉列表最下面的“編輯字體列表”來創(chuàng)建新的字體系列。中文網(wǎng)頁(yè)默認(rèn)字體是宋體，一般留空即可。瀏覽器最好選擇用戶系統(tǒng)第一種字體顯示文本。兩種瀏覽器都支持字體屬性。
大小：定義文本大小。能夠通過選擇數(shù)字和度量單位選擇特定的大小，也能夠選擇相對(duì)大小。以像素為單位能夠有效地防止瀏覽器變形文本。
提示：CSS中長(zhǎng)度的單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位：
![[轉(zhuǎn)載]DW里CSS的詳細(xì)介紹~~~~~~~~~](http://www./d/file/wangyesheji/htcss/2010-03-07/3149c829581642c03693a9ffc4a2703c.gif "[轉(zhuǎn)載]DW里CSS的詳細(xì)介紹~~~~~~~~~") |
絕對(duì)
長(zhǎng)度
|
px：（象素）根據(jù)顯示器的分辨率來確定長(zhǎng)度。
pt：（字號(hào)）根據(jù)windows系統(tǒng)定義的字號(hào)大小來確定長(zhǎng)度。
in、cn、mm：（英寸、厘米、毫米）根據(jù)顯示的實(shí)際尺寸來確定長(zhǎng)度。此類單位不隨顯示器的分辨率改變而改變。 |
|
相對(duì)
長(zhǎng)度
|
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倍。相對(duì)應(yīng)的CSS屬性是”line-height”。兩種瀏覽器都支持行高屬性。
- 修飾：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。正常文本的默認(rèn)配置是“無(wú)”。鏈接的默認(rèn)配置是“下劃線”。將鏈接配置設(shè)為無(wú)時(shí)，能夠通過定義一個(gè)特別的類刪除鏈接中的下劃線。這些效果能夠同時(shí)存在，將效果前的復(fù)選框選定即可。相對(duì)應(yīng)的CSS屬性是”text-decoration”。兩種瀏覽器都支持修飾屬性。
- 粗細(xì)：對(duì)字體應(yīng)用特定或相對(duì)的粗體量。“正常”等于 400；“粗體”等于 700。相對(duì)應(yīng)的CSS屬性是”font-weight”。兩種瀏覽器都支持粗細(xì)屬性。
- 變量：配置文本的小型大寫字母變量。DW MX 2004不在“文檔”窗口中顯示該屬性。Internet Explorer 支持變量屬性，但 Netscape Navigator 不支持。
- 大小寫：將選定內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋九渲脼槿看髮懟蛐?。兩種瀏覽器都支持大小寫屬性。
- 顏色：配置文本顏色。兩種瀏覽器都支持顏色屬性。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式背景屬性】使用“CSS 樣式定義”對(duì)話框的“背景”類別能夠定義 CSS 樣式的背景配置。能夠?qū)W(wǎng)頁(yè)中的任何元素應(yīng)用背景屬性。例如，創(chuàng)建一個(gè)樣式，將背景顏色或背景圖像添加到任何頁(yè)面元素中，比如在文本、表格、頁(yè)面等的后面。還能夠配置背景圖像的位置。
|
提示：本頁(yè)背景圖片固定，是【定義 CSS 樣式背景屬性】的效果。
|
定義背景配置：
在“CSS 樣式定義”對(duì)話框中，選擇“背景”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(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 不支持。
水平位置：和垂直位置指定背景圖像相對(duì)于元素的初始位置。這能夠用于將背景圖像和頁(yè)面中央垂直和水平對(duì)齊。假如附件屬性為“固定”，則位置相對(duì)于“文檔”窗口而不是元素。Internet Explorer支持該屬性，但 Netscape Navigator 不支持。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式區(qū)塊屬性】使用“CSS 樣式定義”對(duì)話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對(duì)齊配置。下列兩組表格為文本定義區(qū)塊屬性前后對(duì)比：
|
原文本未定義區(qū)塊屬性
|
|
【定義CSS樣式區(qū)塊屬性】
|
|
定義區(qū)塊屬性后效果
|
|
【定義CSS樣式區(qū)塊屬性】
|
|
原文本未定義區(qū)塊
|
| 使用“樣式定義”對(duì)話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對(duì)齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。 |
|
定義區(qū)塊后效果（參數(shù)見下圖）
|
| 使用“樣式定義”對(duì)話框的“區(qū)塊”類別能夠定義標(biāo)簽和屬性的間距和對(duì)齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。 |
定義區(qū)塊配置：在“CSS樣式定義”對(duì)話框中，選擇“區(qū)塊”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
單詞間距：配置單詞的間距。若要配置特定的值，請(qǐng)?jiān)趶棾鍪讲藛沃羞x擇“值”，然后輸入一個(gè)數(shù)值。在第二個(gè)彈出式菜單中，選擇度量單位。
注意：能夠指定負(fù)值，但顯示取決于瀏覽器。Dreamweaver 不在“文檔”窗口中顯示該屬性。
字母間距：增加或減小字母或字符的間距。若要減少字符間距，請(qǐng)指定一個(gè)負(fù)值（例如 -4）。字母間距配置覆蓋對(duì)齊的文本配置。Internet Explorer 4 和更高版本連同 Netscape Navigator 6 支持“字母間距”屬性。
垂直對(duì)齊：指定應(yīng)用他的元素的垂直對(duì)齊方式。僅當(dāng)應(yīng)用于 <img> 標(biāo)簽時(shí)，Dreamweaver 才在“文檔”窗口中顯示該屬性。
文本對(duì)齊：配置元素中的文本對(duì)齊方式。兩種瀏覽器都支持“文本對(duì)齊”屬性。
文本縮進(jìn)：指定第一行文本縮進(jìn)的程度。能夠使用負(fù)值創(chuàng)建凸出，但顯示取決于瀏覽器。僅當(dāng)標(biāo)簽應(yīng)用于塊級(jí)元素時(shí)，Dreamweaver 才在“文檔”窗口中顯示該屬性。兩種瀏覽器都支持“文本縮進(jìn)”屬性。
空格：確定怎樣處理元素中的空白。從下面三個(gè)選項(xiàng)中選擇：“正常”收縮空白；“保留”的處理方式即保留任何空白，包括空格、制表符和回車；“不換行”指定僅當(dāng)碰到 br 標(biāo)簽時(shí)文本才換行。Dreamweaver 不在“文檔”窗口中顯示該屬性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”屬性。
顯示：指定是否顯示連同怎樣顯示元素。“無(wú)”關(guān)閉他被指定給的元素的顯示。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式方框?qū)傩浴渴褂?#8220;CSS 樣式定義”對(duì)話框的方框（又稱盒子）類別能夠?yàn)榭刂圃卦陧?yè)面上的放置方式的標(biāo)簽和屬性定義配置。能夠在應(yīng)用填充和邊距配置時(shí)將配置應(yīng)用于元素的各個(gè)邊，也能夠使用“全部相同”配置將相同的配置應(yīng)用于元素的任何邊。
定義元素在頁(yè)面上的放置方式：在“CSS 樣式定義”對(duì)話框中，選擇“方框”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
寬和高：配置元素的寬度和高度。寬和高定義的對(duì)象多為圖片，表格，層等。
|
浮動(dòng)：配置元素浮動(dòng)方式（如文本、層、表格等）。其他元素按通常的方式環(huán)繞在浮動(dòng)元素的周圍。 兩種瀏覽器都支持浮動(dòng)屬性。
這是配置浮動(dòng)效果的演示。定義表格浮動(dòng)（左對(duì)齊），文本自動(dòng)排列在該表格的右側(cè)。
|
清除：不允許元素的浮動(dòng)。左對(duì)齊：表示不允許左邊有浮動(dòng)對(duì)象。右對(duì)齊：表示不允許右邊有浮動(dòng)對(duì)象。兩者：表示允許兩邊都能夠有浮動(dòng)對(duì)象。無(wú)：不允許有浮動(dòng)對(duì)象。兩種瀏覽器都支持“清除”屬性。
填充：指定元素內(nèi)容和元素邊框（假如沒有邊框，則為邊距）之間的間距。取消選擇“全部相同”選項(xiàng)可配置元素各個(gè)邊的填充。
全部相同：將相同的填充屬性配置為他應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
邊界：指定一個(gè)元素的邊框（假如沒有邊框，則為填充）和另一個(gè)元素之間的間距。僅當(dāng)應(yīng)用于塊級(jí)元素（段落、標(biāo)題、列表等）時(shí)，DW MX 2004才在“文檔”窗口中顯示該屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊距。
全部相同：將相同的邊距屬性配置為他應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式邊框?qū)傩浴渴褂?#8220;CSS 樣式定義”對(duì)話框的“邊框”類別能夠定義元素周圍的邊框的配置（如寬度、顏色和樣式）。
提示：本頁(yè)為邊框進(jìn)行了配置 （樣式：點(diǎn)劃線 寬度：2px 顏色：#FF0000）
配置邊框樣式：
在“CSS 樣式定義”對(duì)話框中，選擇“邊框”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
樣式：配置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。DW MX 2004在“文檔”窗口中將任何樣式呈現(xiàn)為實(shí)線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊框樣式。
全部相同：將相同的邊框樣式屬性配置應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
寬度：配置元素邊框的粗細(xì)。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可配置元素各個(gè)邊的邊框?qū)挾取?br> 全部相同：將相同的邊框?qū)挾扰渲脩?yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
顏色：配置邊框的顏色。能夠分別配置每個(gè)邊的顏色，但顯示取決于瀏覽器。取消選擇“全部相同”可配置元素各個(gè)邊的邊框顏色。全部相同：將相同的邊框顏色配置應(yīng)用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式列表屬性】 “CSS 樣式定義”對(duì)話框的“列表”類別為列表標(biāo)簽定義列表配置（如項(xiàng)目符號(hào)大小和類型）。
定義列表樣式：
在“CSS 樣式定義”對(duì)話框中，選擇“列表”（如下圖），然后選擇所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
- 類型：配置項(xiàng)目符號(hào)或編號(hào)的外觀。兩種瀏覽器都支持“類型”。
- 項(xiàng)目符號(hào)圖像：能夠?yàn)轫?xiàng)目符號(hào)指定自定義圖像。單擊“瀏覽”選擇圖像或鍵入圖像的路徑。
- 位置：配置列表項(xiàng)文本是否換行和縮進(jìn)連同文本是否換行到左邊距。
列表屬性配置應(yīng)用舉例如下：
|
圓點(diǎn)符號(hào)
|
數(shù)字編號(hào)
|
圖像符號(hào)
|
|
CSS樣式表屬性分為：
- 類型；
- 背景；
- 區(qū)塊；
- 方框；
- 邊框；
- 列表；
- 定位；
- 擴(kuò)展；
|
CSS樣式表屬性分為：
- 類型；
- 背景；
- 區(qū)塊；
- 方框；
- 邊框；
- 列表；
- 定位；
- 擴(kuò)展；
|
CSS樣式表屬性分為：
- 類型；
- 背景；
- 區(qū)塊；
- 方框；
- 邊框；
- 列表；
- 定位；
- 擴(kuò)展；
|
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式定位屬性】 “定位”樣式屬性使用“層”最好選擇參數(shù)中定義層的默認(rèn)標(biāo)簽，將標(biāo)簽或所選文本塊更改為新層。
配置層定位屬性：
在“CSS 樣式定義”對(duì)話框中，選擇“定位”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
類型：確定瀏覽器應(yīng)怎樣來定位層。
絕對(duì)：使用“定位”框中輸入的坐標(biāo)（相對(duì)于頁(yè)面左上角）來放置層。
相對(duì)：使用“定位”框中輸入的坐標(biāo)（相對(duì)于對(duì)象在文檔的文本中的位置）來放置層。該選項(xiàng)不顯示在“文檔”窗口中。
靜態(tài)：將層放在他在文本中的位置。
顯示：確定層的初始顯示條件。假如不指定可見性屬性，則默認(rèn)情況下大多數(shù)瀏覽器都繼承父級(jí)的值。選擇以下可見性選項(xiàng)之一：
繼承：繼承層父級(jí)的可見性屬性。假如層沒有父級(jí)，則他將是可見的。
可見：顯示該層的內(nèi)容，而不管父級(jí)的值是什么。
隱藏：隱藏這些層的內(nèi)容，而不管父級(jí)的值是什么。
Z 軸：確定層的堆疊順序。編號(hào)較高的層顯示在編號(hào)較低的層的上面。值能夠?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)單位是像素。對(duì)于 CSS 層，還能夠指定下列單位：pc（十二點(diǎn)活字）、pt（點(diǎn)）、in（英寸）、mm（毫米）、cm（厘米）、(ems)、(exs) 或 %（父級(jí)值的百分比）?？s寫必須緊跟在值之后，中間不留空格：例如，3mm。
剪輯：定義層的可見部分。假如指定了剪輯區(qū)域，能夠通過腳本語(yǔ)言（如 javascript）訪問他，并操作屬性以創(chuàng)建像擦除這樣的特別效果。通過使用“改變屬性”行為能夠配置這些擦除效果。
配置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以配置其他的樣式屬性，或單擊“確定”。
【定義 CSS 樣式擴(kuò)展屬性】“擴(kuò)展”樣式屬性包括過濾器、分頁(yè)和光標(biāo)選項(xiàng)，他們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。
指定擴(kuò)展屬性：
在“CSS 樣式定義”對(duì)話框中，選擇“擴(kuò)展”（如下圖），然后配置所需的樣式屬性。
請(qǐng)注意：下列任意屬性假如您認(rèn)為不重要能夠保留為空。
分頁(yè)：在打印期間在樣式所控制的對(duì)象之前或之后強(qiáng)行分頁(yè)。選擇要在彈出式菜單中配置的選項(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)指針位于樣式所控制的對(duì)象上時(shí)改變指針圖像。選擇彈出式菜單（右圖）進(jìn)行配置。（左圖）是他的周詳列表和相關(guān)說明。
過濾器：又稱 CSS濾鏡，對(duì)樣式所控制的對(duì)象應(yīng)用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性，頁(yè)面才變得更加漂亮。從“過濾器”彈出式菜單中選擇一種效果并視具體需要加以配置。各種 CSS 濾鏡屬性的周詳介紹請(qǐng)從導(dǎo)航條選擇“濾鏡屬性”按鈕瀏覽。
過濾器：又稱 CSS濾鏡，對(duì)樣式所控制的對(duì)象應(yīng)用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性，頁(yè)面才變得更加漂亮。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)頁(yè)上制作立體字標(biāo)題帶來了方便。也能夠把Blur濾鏡加載到圖片上，能達(dá)到用圖象處理軟件制作的效果。
“DropShadow”顧名思義就是添加對(duì)象的陰影效果。他的實(shí)際效果看上去就象是原來的對(duì)象離開了頁(yè)面，然后在頁(yè)面上顯示出該對(duì)象的投影。
CSS的無(wú)參數(shù)濾鏡共有六個(gè)（FlipH、FlipV、Invert、Xray、Gray和Light），雖然他們沒有參數(shù)，相對(duì)來講，靈活性要差點(diǎn)，但他們用起來更方便，效果也相當(dāng)明顯。用他們能夠使文字或圖片翻轉(zhuǎn)、獲得圖片的“底片”效果，甚至能夠制作圖片的“X光片”效果。
glow濾鏡：使對(duì)象的邊緣就產(chǎn)生類似發(fā)光的效果，glow”濾鏡制作這種效果操作很簡(jiǎn)便。
Mask濾鏡：能夠?yàn)榫W(wǎng)頁(yè)上的元件對(duì)象作出一個(gè)矩形遮罩效果。
wave濾鏡：他的作用是把對(duì)象按照垂直的波形樣式扭曲的特別效果。
Light濾鏡：能產(chǎn)生一個(gè)模擬光源的效果，配合使用一些簡(jiǎn)單的Javascrpt，使對(duì)象產(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)頁(yè)之間的動(dòng)態(tài)轉(zhuǎn)換，很方便。
【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代表長(zhǎng)方形。
“StartX”和“StartY”：代表漸變透明效果的開始X和Y坐標(biāo)。
“FinishX”和“FinishY”：代表漸變透明效果結(jié)束X和Y坐標(biāo)。
請(qǐng)看下面的演示：
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屬性】淡入淡出的效果濾鏡，能產(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)頁(yè)源代碼的< 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)頁(yè)的源代碼< 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)頁(yè)源代碼的< body >加入這樣的一句代碼：onload="play()"。
配置完成，點(diǎn)F12預(yù)覽效果
