用CSS3完善網站2.9.4媒介查詢媒介查詢（MediaQueries）是CSS3對媒介類型(MediaType)的一個擴展，提供了一個可以根據用戶顯示器或者設備應用不同樣式的規則，例如視窗的寬度、屏幕的分辨率以及可顯示色彩范圍。它是創建移動Web應用的強大工具，這樣我們能為多種手機或者移動終端提供適配方案。例如，media=nscreenand(min-width：600px)and(max-width：800px)-匹配寬度在600像素到800豪素之間的屏幕。2.9.5濾鏡效果2011年12月初，W3C公布了一個新的規范——濾鏡效果（FilterEffect）o這是一個令人興奮的新特性，我們可以使用它來在瀏覽器中創建Photoshop般的效果。借助CSS3濾鏡，我們可以直接在網頁上實現Instagram、Path里那些令人著迷的濾鏡效果oCSS3濾鏡不僅提供了調節色相、飽和度、亮度、黑白度、模糊度的常用濾鏡，還支持SVG、顏色矩陣、光源等多種特性。這個規范非常強大，從此我們就有了在網頁上實現復雜濾鏡效果的一切條件，也許不久我們就能見到Web端的Photoshop呢。圖2-67【另見彩插圖2-67）是使用濾鏡效果前后的效果圖。2.9.6著色器圖2-67由Adobe、蘋果、Opcra提出的CSS著色器(CSSShader)將為CSS技術帶來3D圖形的支持。著色器在Flash、游戲和其他圖形相關的應用中使用非常普遍，它本質上是一個小程序，提供了一種特殊效果（例如失真、模糊或者旋渦效果），其行為由輸人參數（失真、模糊或旋渦的量）控制。著色器有兩種：一種是頂點著色器，濟南網站建設公司常用來對場景巾的幾何圖形坐標進行矩陣變換，它是完全可編程的，你可以以任何你想要的方式修改幾何圖形；另一種是片段著色器（也叫像素著色器），它決定每個i角形像素的最終顏色，現代3D游戲中的動態光源效果常常就是由它完成的oCSS著色器允許開發者同時使用頂點著色器和片段著色器。CSS著色器對于生成動態效果非常有用，是CSS濾鏡效果、轉換和動畫規范的有力補充，也為濾鏡效果規范的feCustom元素提供了一種解決方案oCSS3的濾鏡效果為任意網頁內容提供了一種應用一系列有限基本濾鏡的方式，而CSS著色器提供了一種濾鏡效果的可擴展機制，允許開發者自定義著色效果，以此來為HTML元素實現豐富的可視化動畫效果。此外，CSS著色器為濾鏡模型引入了頂點著色器的概念，它通過為元素盒子應用頂點著色器的方式帶來了任意改變文檔中元素形狀的能力oCSS著色器的另外一個強大之處還在于它能夠應用在所有的HTML，元素上，包括圖片、Canvas、SVG、視頻等。圖2-68是Adobe提供的演示視頻截圖，其中Twitter、Google地圖和街景被自由地彎曲和折疊。圖2-68圖2-69足一個給圖片運用波紋效果的示例，這種波紋效果主要的CSS代碼如下（請注意目前還未有瀏覽器支持