第六章-CSS層疊樣式表(網(wǎng)頁(yè)設(shè)計(jì)與Web編程)

1、第六章第六章-CSS-CSS層疊樣式表層疊樣式表( (網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)與WebWeb編程編程) )內(nèi)容提要內(nèi)容提要p6.1 CSS的基本概念的基本概念p6.2 如何使用如何使用Dreamweaver CS3建立建立CSSp6.3 CSS濾鏡濾鏡6.1 CSS的基本概念的基本概念p6.1.1 樣式和規(guī)則樣式和規(guī)則p6.1.2 層疊和順序?qū)盈B和順序6.1.1 樣式和規(guī)則樣式和規(guī)則CSS樣式 選擇符（selector） 屬性（properties） 屬性值（value） 格式：選擇符 屬性 : 值 選擇符 屬性1 : 值1; 屬性2 : 值2 基本格式：復(fù)合樣式：6.1.1 樣式和規(guī)則樣式和規(guī)則p

2、（1）單個(gè)）單個(gè)“HTML標(biāo)簽標(biāo)簽”作為選擇符作為選擇符 p 單個(gè)單個(gè)“HTML標(biāo)簽標(biāo)簽” ： body、table、p等等等等 例：body color: black lbody是指頁(yè)面主體部分 lcolor是控制文字顏色的屬性 lblack是顏色的值 效果：頁(yè)面主體（body）中的文字為黑色。 6.1.1 樣式和規(guī)則樣式和規(guī)則屬性值由多個(gè)單詞組成，必須在值上加引號(hào)。屬性值由多個(gè)單詞組成，必須在值上加引號(hào)。 例1：p font-family: sans serif 效果：定義了段落字體為sans serif 需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，注意使需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，注意使用分號(hào)將

3、所有的屬性和值分開(kāi)。用分號(hào)將所有的屬性和值分開(kāi)。 例2：p text-align: center; color: red 效果：定義了段落居中排列，并且段落中的文字為紅色 6.1.1 樣式和規(guī)則樣式和規(guī)則為了使所定義的樣式表易讀，可以采用分行的為了使所定義的樣式表易讀，可以采用分行的書寫格式。書寫格式。效果：段落排列居中，段落中文字為黑色，字體是arial 例3： p text-align: center; color: black; font-family: arial 6.1.1 樣式和規(guī)則樣式和規(guī)則p（2）選擇符組）選擇符組 把具有相同屬性和值的選擇符組合起來(lái)書寫，用逗號(hào)將把具有相同屬性

4、和值的選擇符組合起來(lái)書寫，用逗號(hào)將選擇符分開(kāi)，以減少重復(fù)定義。選擇符分開(kāi)，以減少重復(fù)定義。 例：h1, h2, h3, h4, h5, h6 color: green 效果：組里包括所有的標(biāo)題元素，每個(gè)標(biāo)題元素的文字都為綠色。 p, table font-size: 9pt p font-size: 9pt table font-size: 9pt 效果：段落和表格里的文字尺寸為9號(hào)字 。 例2：6.1.1 樣式和規(guī)則樣式和規(guī)則p（3）類選擇符）類選擇符 把相同的元素分類定義不同的樣式，定義類選擇符時(shí)，把相同的元素分類定義不同的樣式，定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。在自定類的名稱

5、前面加一個(gè)點(diǎn)號(hào)。類名為英文單詞或以英文開(kāi)頭與數(shù)字的組合類名為英文單詞或以英文開(kāi)頭與數(shù)字的組合 例1：定義兩個(gè)不同的段落，一個(gè)段落向右對(duì)齊，一個(gè)居中，可先為段落定義兩個(gè)類。p.right text-align: right p.center text-align: center 應(yīng)用在不同的段落里，在HTML標(biāo)簽里加入class類參數(shù)： 這個(gè)段落向右對(duì)齊的 這個(gè)段落是居中排列的 6.1.1 樣式和規(guī)則樣式和規(guī)則 類選擇符的另一種用法，在選擇符中省略類選擇符的另一種用法，在選擇符中省略HTML標(biāo)簽名標(biāo)簽名，這樣可以把幾個(gè)不同的元素定義成相同的樣式。，這樣可以把幾個(gè)不同的元素定義成相同的樣式。 例2

6、： .center text-align: center 效果：定義了.center的類選擇符，其表示文字居中排列。 這個(gè)標(biāo)題是居中排列的 這個(gè)段落也是居中排列的 可應(yīng)用到任何元素上。如：使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類，于是這兩個(gè)元素的樣式都可以隨著類選擇符“.center”而定： 6.1.1 樣式和規(guī)則樣式和規(guī)則p（4）ID選擇符選擇符 p ID參數(shù)指定了某個(gè)單一元素，參數(shù)指定了某個(gè)單一元素，ID選擇符用來(lái)對(duì)這個(gè)單選擇符用來(lái)對(duì)這個(gè)單一元素定義單獨(dú)的樣式。一元素定義單獨(dú)的樣式。 方法一：方法一：以標(biāo)簽跟以標(biāo)簽跟“#ID名稱名稱”開(kāi)頭，使該開(kāi)頭，使該ID代表的樣代表

7、的樣式屬性只用于該標(biāo)簽（比如段落標(biāo)簽式屬性只用于該標(biāo)簽（比如段落標(biāo)簽p）。）。 p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent 例1： 這個(gè)段落應(yīng)用ID選擇符p#intro的樣式規(guī)則。 應(yīng)用：6.1.1 樣式和規(guī)則樣式和規(guī)則 方法二：方法二：直接以直接以“#”開(kāi)頭，使該開(kāi)頭，使該ID代表的樣式屬性可用代表的樣式屬性可用于各種網(wǎng)頁(yè)元素。于各種網(wǎng)頁(yè)元素。 #intro font-size:110%; font-weight:bold; color:#0000ff; backg

8、round-color:transparent 例2：效果：定義了一條id=intro 的CSS規(guī)則：字體尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明。整個(gè)網(wǎng)頁(yè)文檔中的每個(gè)ID名稱必須是唯一的，其必須以一個(gè)字母開(kāi)頭，緊跟字母、識(shí)字或連字符組成。字母限于A-Z和a-z。注：6.1.1 樣式和規(guī)則樣式和規(guī)則p（5）包含選擇符）包含選擇符可以單獨(dú)對(duì)元素可以單獨(dú)對(duì)元素1里包含的元素里包含的元素2定義樣式表。定義樣式表。 例：對(duì)表格元素table里包含的鏈接元素a定義樣式表：table a font-size: 12px 此定義對(duì)表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為

9、默認(rèn)大小。這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義。注：6.1.2 層疊和順序?qū)盈B和順序p（1）內(nèi)聯(lián)樣式（）內(nèi)聯(lián)樣式（Inline styles）在在HTML標(biāo)簽內(nèi)使用標(biāo)簽內(nèi)使用style屬性定義的，適用于該標(biāo)簽的屬性定義的，適用于該標(biāo)簽的個(gè)別樣式。個(gè)別樣式。 內(nèi)聯(lián)樣式舉例。內(nèi)聯(lián)樣式舉例。 例1：使用內(nèi)聯(lián)樣式，必須使使用內(nèi)聯(lián)樣式，必須使用用Content-Style-Type 和和text/css對(duì)整個(gè)文檔進(jìn)行單對(duì)整個(gè)文檔進(jìn)行單獨(dú)的樣式表語(yǔ)言聲明所以獨(dú)的樣式表語(yǔ)言聲明所以，使用內(nèi)聯(lián)，使用內(nèi)聯(lián)CSS的網(wǎng)頁(yè)設(shè)的網(wǎng)頁(yè)設(shè)計(jì)者必須在計(jì)者必須在head部分包括部分包括以下標(biāo)簽：以下

10、標(biāo)簽： 6.1.2 層疊和順序?qū)盈B和順序 這段的樣式是紅色的New Century Schoolbook字，如果字體可用的話。 style屬性可以應(yīng)用于任意屬性可以應(yīng)用于任意body元素元素(包括包括body本身本身)，除了除了basefont、param和和script。style屬性可以將任何屬性可以將任何數(shù)量的樣式屬性聲明當(dāng)作自己的值，而每個(gè)聲明用分?jǐn)?shù)量的樣式屬性聲明當(dāng)作自己的值，而每個(gè)聲明用分號(hào)隔開(kāi)。號(hào)隔開(kāi)。 6.1.2 層疊和順序?qū)盈B和順序p（2）內(nèi)部樣式（）內(nèi)部樣式（Embedded styles）在在與與之間用之間用style標(biāo)簽加入標(biāo)簽加入css樣式定義。樣式定義。適用于指定該

11、網(wǎng)頁(yè)的樣式。適用于指定該網(wǎng)頁(yè)的樣式。 內(nèi)部樣式舉例。例：ltype屬性是指使用何種語(yǔ)法，”text/css”表示使用CSS語(yǔ)法 6.1.2 層疊和順序?qū)盈B和順序p （3）鏈接樣式（）鏈接樣式（Linked styles） 事先建立外部樣式表文件（事先建立外部樣式表文件（.css），然后在網(wǎng)頁(yè)文件的），然后在網(wǎng)頁(yè)文件的與與之間用之間用link標(biāo)簽鏈接該樣式表文件。此法使頁(yè)面內(nèi)容與版標(biāo)簽鏈接該樣式表文件。此法使頁(yè)面內(nèi)容與版面設(shè)計(jì)分開(kāi)，易于管理整個(gè)網(wǎng)站的網(wǎng)頁(yè)風(fēng)貌。面設(shè)計(jì)分開(kāi)，易于管理整個(gè)網(wǎng)站的網(wǎng)頁(yè)風(fēng)貌。 鏈接樣式舉例。lrel屬性是指在頁(yè)面中使用外部樣式表文件 ltype屬性是指使用何種語(yǔ)法 lhr

12、ef屬性是指樣式表文件的URL地址 樣式表文件可使用任何文本編輯器打開(kāi)并編輯，樣式表文件可使用任何文本編輯器打開(kāi)并編輯，內(nèi)容是具體的內(nèi)容是具體的CSS樣式定義，不包括標(biāo)簽。樣式定義，不包括標(biāo)簽。例如例如my.css文件的內(nèi)容如下：文件的內(nèi)容如下：p color : red 例：6.1.2 層疊和順序?qū)盈B和順序p（4）導(dǎo)入樣式）導(dǎo)入樣式（Imported styles） 導(dǎo)入樣式是指在內(nèi)部樣式導(dǎo)入樣式是指在內(nèi)部樣式定義里，使用定義里，使用import命命令引用事先建立的外部樣令引用事先建立的外部樣式表文件。式表文件。 導(dǎo)入樣式舉例。例：6.1.2 層疊和順序?qū)盈B和順序p 5）缺省瀏覽器樣式（）缺

13、省瀏覽器樣式（Default browser styles） 瀏覽器一般按照上述順序，由內(nèi)到外，依次地，繼承式地（層疊瀏覽器一般按照上述順序，由內(nèi)到外，依次地，繼承式地（層疊式地）執(zhí)行樣式表的指令。式地）執(zhí)行樣式表的指令。 CSS的妙趣在于能夠利用的妙趣在于能夠利用CSS樣式規(guī)則有效地控制頁(yè)面對(duì)象。如下樣式規(guī)則有效地控制頁(yè)面對(duì)象。如下圖，從樣式圖，從樣式(左左)和標(biāo)簽和標(biāo)簽(右右)兩個(gè)角度可見(jiàn)兩個(gè)角度可見(jiàn)CSS定義的層疊性：從外定義的層疊性：從外到內(nèi)均可定義到內(nèi)均可定義CSS，并且內(nèi)層能夠繼承外層的，并且內(nèi)層能夠繼承外層的CSS。 6.1.2 層疊和順序?qū)盈B和順序CSS三級(jí)別三級(jí)別l外部樣式：

14、應(yīng)用于多個(gè)頁(yè)面，可使用擴(kuò)展名為.css的外部樣式文件（用記事本建立） l內(nèi)部樣式：應(yīng)用于單個(gè)頁(yè)面，可在網(wǎng)頁(yè)的與之間定義一個(gè)樣式代碼塊； l內(nèi)置樣式：應(yīng)用于頁(yè)面內(nèi)部明確的標(biāo)簽，可在標(biāo)簽內(nèi)部添加style=.屬性 CSS三級(jí)別 6.2 如何使用如何使用Dreamweaver CS3建立建立CSSp6.2.1 用用“CSS面板面板”建立建立CSSp6.2.2 用用“頁(yè)面屬性頁(yè)面屬性”新建內(nèi)部樣式新建內(nèi)部樣式p6.2.3 用用“屬性面板屬性面板”新建內(nèi)部樣式新建內(nèi)部樣式p6.2.4 套用套用CSS6.2.1 用用“CSS面板面板”建立建立CSS “CSS面板面板”可以為當(dāng)前網(wǎng)頁(yè)新建、管理、編輯和套用內(nèi)

15、部樣式，以可以為當(dāng)前網(wǎng)頁(yè)新建、管理、編輯和套用內(nèi)部樣式，以及附加外部樣式表。及附加外部樣式表。 例6-1 Dreamweaver CS3新建一個(gè)HTML網(wǎng)頁(yè)，標(biāo)題為“在線圖書”。 在線圖書 1.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用 HTML代碼(1)： 6.2.1 用用“CSS面板面板”建立建立CSS2.網(wǎng)絡(luò)安全基礎(chǔ)與應(yīng)用 暢銷指數(shù)：詳細(xì)論述網(wǎng)絡(luò)安全的基礎(chǔ)理論認(rèn)真總結(jié)作者多年來(lái)的網(wǎng)絡(luò)安全建設(shè)經(jīng)驗(yàn)準(zhǔn)確介紹網(wǎng)絡(luò)安全的應(yīng)用技術(shù)及前沿成果暢銷指數(shù)： 作者多年教學(xué)與科研工作總結(jié) 概念明晰，實(shí)例豐富，注重技能訓(xùn)練 適合作為網(wǎng)絡(luò)安全應(yīng)用課程的教材 簡(jiǎn)明易懂的寫作風(fēng)格，方便讀者自學(xué)HTML代碼(2)： 6.2.1 用用“CSS

16、面板面板”建立建立CSS“修改修改”-“CSS樣樣式式”“窗口窗口”-“CSS樣樣式式”“CSS”1)打開(kāi)打開(kāi)CSS面板面板6.2.1 用用“CSS面板面板”建立建立CSS2)“新建新建CSS規(guī)則規(guī)則” l“刪除CSS規(guī)則”可以刪除當(dāng)前選定的CSS規(guī)則。l“顯示列表視圖”可按字母序顯示屬性，并把已設(shè)置的屬性顯示在前；l“只顯示設(shè)置屬性”僅顯示已設(shè)置的屬性；l“附加樣式表”可以鏈接或?qū)胧孪冉⒌耐獠繕邮奖砦募?；l“新建CSS規(guī)則”可以新建一條CSS規(guī)則；l“顯示類別視圖”可以按照8個(gè)類別顯示屬性；l“編輯樣式”可以修改當(dāng)前選定的CSS規(guī)則；“標(biāo)簽”-輸入“p”-選擇“僅對(duì)該文檔”-“確定” 6

17、.2.1 用用“CSS面板面板”建立建立CSS3)設(shè)置此條設(shè)置此條CSS規(guī)則規(guī)則“p的的CSS規(guī)則定義規(guī)則定義 ” 4)“確定確定”后編后編輯輯p6.2.1 用用“CSS面板面板”建立建立CSS 在在“確定確定”之后，新之后，新建的建的CSS樣式自動(dòng)應(yīng)樣式自動(dòng)應(yīng)用到當(dāng)前的網(wǎng)頁(yè)。在用到當(dāng)前的網(wǎng)頁(yè)。在例例6-1的網(wǎng)頁(yè)代碼里，的網(wǎng)頁(yè)代碼里，自動(dòng)添加了內(nèi)部樣式自動(dòng)添加了內(nèi)部樣式定義：定義：。 至此，可以使用至此，可以使用“CSS面面板板”管理已經(jīng)建立的管理已經(jīng)建立的CSS。既可以直接修改屬性，也可既可以直接修改屬性，也可以使用其下邊的按鈕，或者以使用其下邊的按鈕，或者右鍵單擊其已有的樣式名稱右鍵單擊其

18、已有的樣式名稱，執(zhí)行快捷菜單里的命令。，執(zhí)行快捷菜單里的命令。6.2.2 用用“頁(yè)面屬性頁(yè)面屬性”新建內(nèi)部樣式新建內(nèi)部樣式1)“頁(yè)面屬性”2)確定后嵌入內(nèi)部樣式定義 6.2.3 用用“屬性面板屬性面板”新建內(nèi)部樣式新建內(nèi)部樣式p “屬性面板屬性面板” 用于設(shè)置當(dāng)前選定對(duì)象的內(nèi)部樣式屬性用于設(shè)置當(dāng)前選定對(duì)象的內(nèi)部樣式屬性 例：對(duì)于“在線圖書”網(wǎng)頁(yè)，選定其中的文本“1.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用”，設(shè)置其字體為“華文隸書”，即可自動(dòng)新建內(nèi)部樣式STYLE1。6.2.3 用用“屬性面板屬性面板”新建內(nèi)部樣式新建內(nèi)部樣式對(duì)所選定的文本“1.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用”，一方面應(yīng)用.STYLE1定義的“華文隸書”字體屬

19、性，另一方面繼承了外層標(biāo)簽p和body定義的文本大小、斜體樣式和顏色屬性。 “CSS面板”上可見(jiàn)該樣式為“類”.STYLE1，如右圖。在和之間添加了內(nèi)部樣式定義.STYLE1 font-family: 華文隸書 注：6.2.4 套用套用CSSn 對(duì)于已經(jīng)建立的對(duì)于已經(jīng)建立的CSS樣式，可以套用到選定的對(duì)象上。樣式，可以套用到選定的對(duì)象上。 例例:在上列網(wǎng)頁(yè)中，選定文本在上列網(wǎng)頁(yè)中，選定文本“2.網(wǎng)絡(luò)安全基礎(chǔ)與應(yīng)用網(wǎng)絡(luò)安全基礎(chǔ)與應(yīng)用”，右鍵，右鍵單擊單擊.STYLE1，選擇，選擇“套用套用”，或者在下邊，或者在下邊“屬性面板屬性面板”的的“樣樣式式”框里選擇框里選擇STYLE1，則，則.STYL

20、E1即可應(yīng)用到選定的文本上。如即可應(yīng)用到選定的文本上。如下圖下圖: 6.3 CSS濾鏡濾鏡l CSS的濾鏡（的濾鏡（filter）屬性）屬性 lglow：加光輝在附近對(duì)象的邊外。：加光輝在附近對(duì)象的邊外。lblur：創(chuàng)建高速度移動(dòng)效：創(chuàng)建高速度移動(dòng)效果，即模糊效果。果，即模糊效果。lchroma：制作專用顏色透：制作專用顏色透明。明。lDropShadow：創(chuàng)建對(duì)象：創(chuàng)建對(duì)象的固定影子。的固定影子。lFlipH：創(chuàng)建水平鏡像圖片。：創(chuàng)建水平鏡像圖片。lalpha：設(shè)置透明層次：設(shè)置透明層次lFlipV：創(chuàng)建垂直鏡像圖片。：創(chuàng)建垂直鏡像圖片。lXray：使對(duì)象變得像被：使對(duì)象變得像被x光照射一樣

21、。光照射一樣。linvert：反色：反色llight：創(chuàng)建光源在對(duì)象上。：創(chuàng)建光源在對(duì)象上。lmask：創(chuàng)建透明掩膜在對(duì)象上。：創(chuàng)建透明掩膜在對(duì)象上。lshadow：創(chuàng)建偏移固定影子。：創(chuàng)建偏移固定影子。lgray：把圖片灰度化。：把圖片灰度化。lwave：波紋效果。：波紋效果。6.3 CSS濾鏡濾鏡p（1）濾鏡：）濾鏡：Alpha設(shè)置透明層次設(shè)置透明層次 語(yǔ)法：語(yǔ)法：STYLE=filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=f

22、inishX，F(xiàn)inishY=finishY) lStyle：1或或2或或3lOpacity：起始值，取值為：起始值，取值為0100, 0為透明，為透明，100為原圖。為原圖。lStartX/ StartY ：任意值：任意值lFinishOpacity：目標(biāo)值。：目標(biāo)值。說(shuō)明：說(shuō)明：例：例：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2) 6.3 CSS濾鏡濾鏡p（2）濾鏡：）濾鏡：blur創(chuàng)建高速度移動(dòng)效果，即模糊創(chuàng)建高速度移動(dòng)效果，即模糊效果效果 語(yǔ)法：語(yǔ)法：STYLE=filter:Blur(Add = add, Direction = d

23、irection, Strength = strength) lStrength：效果增長(zhǎng)的數(shù)值，一般：效果增長(zhǎng)的數(shù)值，一般5即可即可 lAdd：一般為：一般為1，或，或0 lDirection：角度，：角度，0315度，步長(zhǎng)為度，步長(zhǎng)為45度度 說(shuō)明：說(shuō)明：例：例：filter:Blur(Add=1,Direction=45,Strength=5) 6.3 CSS濾鏡濾鏡p（3）濾鏡：）濾鏡：Chroma制作專用顏色透明制作專用顏色透明 語(yǔ)法：語(yǔ)法：STYLE=filter:Chroma(Color = color) lcolor：#rrggbb格式，任意。格式，任意。 說(shuō)明：說(shuō)明：例：例：

24、filter:Chroma(Color=#FFFFFF) 6.3 CSS濾鏡濾鏡p（4）濾鏡：）濾鏡：DropShadow創(chuàng)建對(duì)象的固定影子創(chuàng)建對(duì)象的固定影子 語(yǔ)法：語(yǔ)法：STYLE=filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive) lOffy：Y軸偏離值。軸偏離值。lColor:#rrggbb格式，任意。格式，任意。 lPositive：1或或0。lOffx：X軸偏離值。軸偏離值。說(shuō)明：說(shuō)明：例：例：filter:DropShadow(Color=#6699CC,OffX=5,OffY=5,Posi

25、tive=1) 6.3 CSS濾鏡濾鏡p（5）濾鏡：）濾鏡：FlipH創(chuàng)建水平鏡像圖片創(chuàng)建水平鏡像圖片 語(yǔ)法：語(yǔ)法：STYLE=filter:FlipH 例：例：filter:FlipH p（6）濾鏡：）濾鏡：FlipV創(chuàng)建垂直鏡像圖片創(chuàng)建垂直鏡像圖片 語(yǔ)法：語(yǔ)法：STYLE=filter:FlipV 例：例：filter:FlipV p（14）濾鏡：）濾鏡：Xray使對(duì)象變得像被使對(duì)象變得像被x光照射一樣光照射一樣語(yǔ)法：語(yǔ)法：STYLE=filter:Xray 例：例：filter:Xray 16.3 CSS濾鏡濾鏡p（7）濾鏡：）濾鏡：glow加光輝在附近對(duì)象的邊外加光輝在附近對(duì)象的邊外

26、語(yǔ)法：語(yǔ)法：STYLE=filter:Glow(Color=color, Strength=strength) lStrength：強(qiáng)度：強(qiáng)度(0100)lColor：發(fā)光顏色。：發(fā)光顏色。lFinishOpacity：目標(biāo)值。：目標(biāo)值。說(shuō)明：說(shuō)明：例：例： filter:Glow(Color=#6699CC,Strength=5) 6.3 CSS濾鏡濾鏡p（8）濾鏡：）濾鏡：gray把圖把圖片灰度化片灰度化 語(yǔ)法：語(yǔ)法： STYLE=filter:Gray 例：例： filter:Grayp（9）濾鏡：）濾鏡：invert反色反色 語(yǔ)法：語(yǔ)法：STYLE=filter:Invert 例：例：

27、filter:Invert p（10）light：創(chuàng)建光源在對(duì)象上：創(chuàng)建光源在對(duì)象上語(yǔ)法：語(yǔ)法：style=filter:light(enabled=0 | 1) 例：例：filter:light(enabled=1)p（11）濾鏡：）濾鏡：mask創(chuàng)建透明掩膜在對(duì)象上創(chuàng)建透明掩膜在對(duì)象上 語(yǔ)法：語(yǔ)法：STYLE=filter:Mask(Color=color) 例：例：filter:Mask (Color=#FFFFE0) 6.3 CSS濾鏡濾鏡p（12）濾鏡：）濾鏡：shadow創(chuàng)建偏移固定影子創(chuàng)建偏移固定影子 語(yǔ)法：語(yǔ)法：filter:Shadow(Color=color, Direction=direction) lColor：#rrggbb格式。格式。 lDirection：角度，：角度，0315度，步長(zhǎng)為度，步長(zhǎng)為45度。度。說(shuō)明：說(shuō)明：例：例：filter:Shadow (Color=#6699CC, Direction=135) 6.3 CSS濾鏡濾鏡p（13）濾鏡：）濾