圖解css3：核心技術與案例實戰. 1.1 什麼是CSS3

1.1　什麼是css3

css3并不是一門新的語言。如果接觸過css就知道，css是建立網頁的另一個獨立但并非不重要的一部分。css是種層疊樣式表，是一種樣式語言，用來告訴浏覽器如何渲染你的web頁面。

css3是css規範的最新版本，在css2.1的基礎上增加了很多強大的新功能，以幫助開發人員解決一些問題，并且不再需要非語義标簽、複雜的javascript腳本以及圖檔，例如圓角功能、多背景、透明度、陰影等功能等。css2.1是單一的規範，而css3被劃分成幾個子產品組，每個子產品組都有自己的規範。這樣的好處是整個css3的規範釋出不會因為部分難纏的部分而影響其他子產品的推進。

現在先來看看css3激動人心的新特性。

1.1.1　css3的新特性

css3規範并不是獨立的，它重複了css的部分内容，但在其基礎上進行了很多的增補與修改。css3與之前的幾個版本相比，其變化是革命性的，雖然它的部分屬性還不能夠被浏覽器完美的支援，但卻讓我們看到網頁樣式發展的前景，讓我們更具有方向感、使命感。

css3新特性非常多，這裡挑選一些被浏覽器支援較為完美、更具實用性的新特性。

1．強大的css3選擇器

使用過jquery的人都知道，jquery的選擇器功能強大，使用友善，css3選擇器和jquery選擇器非常類似。允許設計師通過選擇器直接指定需要的html元素，而不需要在html中添加不必要的類名、id等。使用css3選擇器，能在web的制作中更完美地做到結構與表現分離，設計師能輕松地設計出簡潔、輕量級的web頁面，并且能更好地維護和修改樣式。

2．抛棄圖檔的視覺效果

web中最常見的效果包括圓角、陰影、漸變背景、半透明、圖檔邊框等。而這樣的視覺效果在css中都是依賴于設計師制作圖檔或者javascript腳本來實作的。css3的一些新特性可以用來建立一些特殊的視覺效果，後面的章節将為大家展現這些新特性是如何實作這些視覺效果。

3．背景的變革

如果說css中的背景給你帶來太多的限制，那麼css3将帶來革命性的變化。css3不再局限于背景色、背景圖像的運用，新特性中添加了多個新的屬性值，例如background-origin、background-clip、background-size，此外，還可以在一個元素上設定多個背景圖檔。這樣，如果要設計比較複雜的web頁面效果，就不再需要使用一些多餘标簽來輔助實作了。舉個例子，要實作css中的滑動門效果，在css中基本上要添加2～3個額外的标簽來輔助實作，那麼css3中的這些新特性能夠在一個标簽中完成同等的效果。

4．盒模型變化

盒模型在css中是重中之重，css中的盒模型隻能實作一些基本的功能，對于一些特殊的功能需要基于javascript來實作。而在css3中這一點得到了很大的改善，設計師可以直接通過css3來實作。例如，css3中的彈性盒子，這個屬性将給大家引入一種全新的布局概念，能輕而易舉實作各種布局，特别是在移動端的布局，它的功能更是強大。大家将在第7章、第8章見識它的神功。

5．陰影效果

陰影主要為分兩種：文本陰影（text-shadow）和盒子陰影（box-shadow）。文本陰影在css中已經存在，但沒有得到廣泛的運用。css3延續了這個特性，并進行了新的定義，該屬性提供了一種新的跨浏覽器方案，使文本看起來更醒目。盒子陰影的實作在css中就有點苦不堪言，為了實作這樣的效果，需要新增标簽、圖檔，而且效果還不一定完美。css3的box-shadow将打破這種局面，可以輕易地為任何元素添加盒子陰影。

6．多列布局與彈性盒模型布局

css3引入了幾個新的子產品用于更友善地建立多列布局。

“多列布局”（multi-column layout）子產品描述了如何像報紙、雜志那樣，把一個簡單的區塊拆分成多列，第9章為大家介紹這個子產品的運用。“彈性盒模型布局”（flexible box layout）子產品能讓區塊在水準、垂直方向對齊，能讓區塊自适應螢幕大小，相對于css的浮動布局、inline-block布局、絕對定位布局來說，它顯得更加友善與靈活。缺點是，這兩個子產品在一些浏覽器中還不被支援，但随着技術的發展革新，這一刻終将到來。

7．web字型和web font圖示

浏覽器對web字型有諸多限制，web font圖示對于設計師來說更奢侈。css3重新引入@font-face，對于設計師來說無疑是件好事。@font-face是連結伺服器上字型的一種方式，這些嵌入的字型能變成浏覽器的安全字型，不再擔心使用者沒有這些字型而無法正常顯示的問題，從此告别用圖檔代替特殊字型的設計時代。

8．顔色與透明度

css3顔色子產品的引入，實作了制作web效果時不再局限于rgb和十六進制兩種模式。css3增加了hsl、hsla、rgba幾種新的顔色模式。在web設計中，能輕松實作某個顔色變得再亮一點或者再暗一點。其中hsla和rgba還增加了透明通道，能輕松地改變任何一個元素的透明度。另外，還可以使用opacity屬性來制作元素的透明度。從此制作透明度不再依賴圖檔或者javascript腳本了。

9．圓角與邊框的新法

圓角是css3中使用最多的一個屬性，原因很簡單：圓角比直線性更美觀，而且不會與設計産生任何沖突。與css制作圓角不同之處是，css3無須添加任何标簽元素與圖檔，也不需借用任何javascript腳本，一個屬性就能搞定。對于邊框，在css中僅局限與邊框的線型、粗細、顔色的設定，如果需要特殊的邊框效果，隻能使用背景圖檔來模仿。css3的border-image屬性使元素邊框的樣式變得豐富起來，還可以使用該屬性實作類似background的效果，對邊框進行扭曲、拉伸和平鋪等。

10．盒容器的變形

在css時代，讓某個元素變形是一個可望而不可及的想法，為了實作這樣的效果，需要寫大量的javascript代碼。css3引進了一個變形屬性，可以在2d或者3d空間裡操作盒容器的位置和形狀，例如旋轉、扭曲、縮放或者移位。我們把這些效果稱為“變形”，大家将在第11章體驗這些新特性。

11．css3過渡與動畫互動效果

css3的“過渡”（transition）特性能在web制作中實作一些簡單的動畫效果，讓某些效果變得更具流線性、平滑性。而css3“動畫”（animation）特性能夠實作更複雜的樣式變化，以及一些互動效果，而不需要使用任何flash或javascript腳本代碼。

12．媒體特性與responsive布局

css3的媒體特性可以實作一種響應式（responsive）布局，使布局可以根據使用者的顯示終端或裝置特征選擇對應的樣式檔案，進而在不同的顯示分辨率或裝置下具有不同的布局渲染效果，特别是在移動端上的實作更是一種理想的做法。

1.1.2　css3的發展狀況

通過對css3新特性的簡單介紹，大家可能要問，這些超炫的特性什麼時候才能成為标準并最終釋出呢？其實css3的每一個子產品都有它自己的更新（進度表）時間，如圖1-1所示，大家可以從這個圖上看到css3的目前發展的詳細進度。

web開發者希望在css3标準規範釋出之前就能使用這些新特性，而它們的使用還受限于不同的浏覽器，隻有浏覽器完全支援了，才能完全使用這些新特性。

目前，css3還不是最終的标準，有很多浏覽器支援不夠完美，那麼現在可以使用css3嗎？

1.1.3　現在能使用css3嗎

從圖1-1中可以看出，css3還在不斷完善中，很多功能還處于草稿階段，但部分子產品進入了“候選推薦”狀态，這說明在web設計中完全可以使用這些子產品。即使有一些子產品還處于“工作草案狀态”，也可以嘗試着使用，隻有不斷将新的css技術運用到實際工作中，才能發現應用這些新技術所面臨的真正挑戰，以便w3c更好地完善它們，進而更好地、有效地促使它們成為真正的标準。

你應該了解哪些可用，哪些還不能使用。換句話說，在實際工作開發中可以先運用相對穩定的css3特性，并確定不會對尚不支援這些特性的浏覽器造成影響。做到明智的使用，而不是盲目地濫用css3新特性。

1.1.4　使用css3有什麼好處

與css相比，使用css3有什麼好處呢？最明顯的就是css3能讓頁面看起來非常炫、非常酷，使網站設計錦上添花，但它的好處遠遠不止這些。在大多數情況下，使用css3不僅有利于開發與維護，還能提高網站的性能。與此同時，還能增加網站的可通路性、可用性，使網站能适配更多的裝置，甚至還可以優化網站seo，提高網站的搜尋排名結果。下面介紹css3特有的好處。

1．減少開發與維護成本

為什麼說css3能減少開發與維護的成本呢？先來看一個執行個體。一個圓角效果，在css中需要添加額外的html标簽，使用一個或者更多圖檔來完成，而使用css3隻需要一個标簽、一個border-radius屬性就能完成。這樣，css3技術能把你從繪圖、切圖和優化圖檔的工作中解救出來。

如果後續需要調整這個圓角的弧度或者圓角的顔色，使用css，要從頭繪圖、切圖才能完成，而使用css3幾秒就完成這些工作。

css3還能使你遠離一大堆的javascript腳本代碼或者flash，你不再需要花大把時間去寫腳本或者尋找合适的腳本插件并修改以适配你的網站特效。

最後，有些css3技術還能幫你對頁面進行“減肥”，讓結構更加“苗條”。你不用為了達到一個效果而嵌套很多div和類名，這樣能有效地提高工作效率、減少開發時間、降低開發成本。例如，制作一個重疊的背景效果，在css中需要添加div标簽和類名，在不同的div中放一張背景圖，現在可以使用css3的多背景和背景尺寸等新特性，在一個div标簽中完成這些工作。

2．提高頁面性能

很多css3技術通過提供相同的視覺效果而成為圖檔的“替代品”，換句話說，在進行web開發時，減少多餘的标簽嵌套，以及圖檔的使用數量，意味着使用者要下載下傳的内容将會更少，頁面加載也會更快。另外，更少的圖檔、腳本和flash檔案讓web站點減少http請求數，這是提升頁面加載速度的最佳方法之一。而使用css3制作圖形化網站無需任何圖檔，極大地減少http的請求數量，并且提升頁面的加載速度。當然，這取決于采用css3特性來代替什麼技術，同樣還要看如何使用css3特性。例如css3的動畫效果，能夠減少對javascript和flash檔案的http請求，但可能要求浏覽器執行很多的工作來完成這個動畫效果的渲染，這有可能導緻浏覽器響應緩慢，緻使使用者流失。是以，在使用一些複雜的特效時，大家需要考慮清楚。不過這樣的現象畢竟為數不多。其實很多css3技術能夠在任何情況下都大幅提高頁面的性能。就這一條足以讓我們使用css3。