【文章內容簡介】 色眼鏡看物體一樣， 一般適用于圖象對象 。 – 參數(shù)： color屬性用來指定要被遮罩的顏色。 CSS的濾鏡屬性 （ filter） 的應用46Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?（ 10） Light——在 HTML元件上放置一個 光影 （沒有參數(shù)）– 作用：該濾鏡能夠使 html對象產生一種模擬光源的投射效果。一旦為對象定義了 light濾鏡屬性，那么就可以調用它的方法來設置或者改變屬性。– light可用的方法有： ?MoveLight　　 移動光源 ?Changcolor　　 改變光的顏色 ?AddAmbient　　 加入包圍的光源 ?AddPoint　　　　 加入點光源 ?Clear　　　　 清除所有的光源 ?AddCone　　　　 加入錐形光源 ?Changstrength 改變光源的強度 CSS的濾鏡屬性 （ filter） 的應用47Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?（ 11） Gray——把一個彩色的圖象變成 灰色調圖象 – 作用 ：該濾鏡能夠使一張彩色的圖片轉變?yōu)榛疑{圖象，一般適用于圖象對象。 – 參數(shù) ：該濾鏡沒有附帶參數(shù)。 （ 12） Invert——讓對象產生 照片底片的效果– 作用 ：該濾鏡能夠使圖象產生照片底片的效果，一般適用于圖象對象。 – 參數(shù) ：該濾鏡沒有參數(shù)。 （ 13） XRay——讓對象 輪廓突出顯示– 作用 ：該濾鏡能夠讓對象反映出它的輪廓并把這些輪廓加亮顯示，一般適用于圖象對象。 – 參數(shù) ：該濾鏡沒有參數(shù)。 CSS的濾鏡屬性 （ filter） 的應用48Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。新的濾鏡（要結合 Javascript腳本）– (1)Blentrans :混合轉換濾鏡，提供淡入淡出效果?duration 參數(shù)：淡入或淡出的時間，以秒作單位 – (2)RevealTrans :提供了更加多變的轉換效果?duration： 轉換的秒數(shù)?transition： 轉換的類型 CSS的濾鏡屬性 （ filter） 的應用49Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?blendTrans實例： 252。在網(wǎng)頁中需要實現(xiàn)淡隱的對象，可插入 div標簽，并在 id欄中輸入名字，如 div1：50Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。在 div1中編輯內容，輸入文字、插入圖片，如下圖虛線框內所示。51Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。編輯 id樣式，樣式名即位該層的 ID名稱，本例中即為＃ div1。52Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。進入代碼視圖，在頭部插入腳本//若當前對象沒有隱藏//應用第一個濾鏡//將對象沒有隱藏//播放第一個濾鏡53Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?選中 “單擊 ”編輯超鏈接內容為：javascript:fadein(div1)54Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。而后預覽！252。若無效果，可將＃ div1的樣式中添加定位方式為 絕對即可55Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。若要實現(xiàn)淡出，只要再加一個函數(shù)： fadeout(obj)即可而后在設計視圖中添加文字，并將該文字的超鏈接設置成javascript:fadeout(div1)56Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?revealTrans： 525 script language=JavaScript type=text/javascriptmyText=new Array(4)。myText[0]=學習網(wǎng)頁制作！！ myText[1]=使用 DreamWeaver！ myText[2]=制作自己的特色小站！ myText[3]=var i=1。function trans(){if (i==3) {i=0。}else{i++。} [0].Apply()。 =myText[i]。 [0].Play()。my=setTimeout(trans(),4000)。}/script57Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?revealTrans： 526 58Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效252。（ 1）文字特效252。（ 2）用樣式表改變鼠標的顯示形狀252。（ 3）圖像特效 ——略59Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效匯總252。（ 1）文字特效– 用 glow濾鏡可以做空心字 ，方法是將 字體顏色設置為背景色 ，再將 glow濾鏡的 strength的值設置為 1或 2即可。– 這個效果的代碼如下：濾鏡實例濾鏡實例p { filter: glow(color=8C96B5,strength=2) shadow(color=B4BBCF,direction=135) }60Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效匯總– 利用 Chroma()濾鏡做圖案文字– 例如：濾鏡實例濾鏡實例span style=backgroundimage: url(img/)。 width: 30pxdiv style=filter: chroma( color=cccccc)。color: cccccc。 backgroundcolor: ffffff。 width: 30px。 font: bold 55pt 宋體 dreamweaver/div/span61Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效252。（ 2）用樣式表改變鼠標的顯示形狀– 用 cursor樣式，取值如下：?hand　 手的形狀?crosshair　 十字型?text　 移動到文本上的那種效果?wait　 等待的那種效果?default　 默認效果?help　 問號?esize　 向右的箭頭?neresize　 向右上的箭頭?nresize　 向上的箭頭?nwresize　 向左上的箭頭?wresize　 向左的箭頭?swresize　 左下的箭頭?sresize　 向下的箭頭?seresize　 向右下的箭頭?auto　 由系統(tǒng)自動給出效果 例如：p style=cursor:handaa/p濾鏡實例濾鏡實例 62Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?應用濾鏡制作常見特效匯總– 陰文– 陽文濾鏡實例濾鏡實例 63Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?CSS與網(wǎng)頁結合應用 ——1 、背景的應用252。background復合屬性– 和 font一樣，可以使用復合屬性一次性設置與背景相關的所有屬性值– background的屬性列表的順序依次為：顏色、圖像、重復、依附、位置– 中間用空格分開，如果某個屬性值為空，則用默認值代替style type=“text/css”.style1 { background: lightgrey url() repeaty fixed 10% 20% }/style64Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?CSS與網(wǎng)頁結合應用 —— 背景的應用252。在頁面上添加純裝飾性的圖像，同時又希望將圖像從內容重分離出來– 創(chuàng)建一個內容為空的 div， 并將該圖像設置為其背景圖252。創(chuàng)建圓角框– 簡單的圓角框： – 高度可變的圓角框： advancedfixed– 高度寬度都可變的圓角框： advancedflexible252。創(chuàng)建陰影效果– 簡單的陰影： ?使用負值的空白邊偏移技術– 帶邊框： style type=“text/css”branding {width:700px。height:200px。background: url() norepeat。}/stylediv id=branding/divstyle type=“text/css”.imgwrapper img {margin:5px 5px 5px 5px。}/style65Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?CSS與網(wǎng)頁結合應用 —— 2 、 CSS中的布局252。要掌握的三個最重要的 CSS概念是：– 框模型 （ box model， 或盒模型）– 定位 （ position）– 浮動 （ float）252。這些概念可以控制在頁面上安排和顯示元素的方式，形成 CSS的基本布局– 與傳統(tǒng)的表格控制布局不同– 只有掌握這些概念， CSS開發(fā)就會變得容易252。這一部份就介紹布局的可視化模型及相關的屬性66Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?CSS的布局252。Box Model– 是 CSS的基石之一– 頁面上的每個元素被看作是一個矩形框，這個框由元素的內容、填充、邊框和空白邊 (margin)組成填充出現(xiàn)在內容區(qū)域的周圍，如果元素上添加背景，那么背景會應用于由內容和填充組成的區(qū)域添加邊框會在填充區(qū)域外加一條邊線，線條可以有多種樣式空白邊是透明的，用來控制元素之間的間隔 67Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?Box Model中的屬性 519 252。填充、邊框和空白邊都可以設置，默認值均為 0252。注意：– 在 CSS的 BOX模型中， width和 height指的是內容區(qū)域的寬度和高度– 而 IE5和 IE6在怪異模式中采用自己的非標準的 Box模型， width是內容、填充和邊框寬度的總和， height也是如此 68Inter與網(wǎng)頁設計 CSS樣式表樣式表 ?252。MARGIN空白邊寬度設置– 包括下列屬性?MARGINLEFT?MARGINRIGHT?MARGINTOP?MARGINBOTTOM– 也可以使用復合屬性： margin， 按上－右－下－左的順序 margin : auto | length– 可以使用 長度值或百分數(shù)，也可以是 auto(由瀏覽器自動調整 )style type=“text/css”style1 { margintop:100px }s