本節書摘來自華章社區《圖解CSS3：核心技術與案例實戰》一書中的第1章，第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。

總結

以上是生活随笔為你收集整理的《图解CSS3：核心技术与案例实战》——1.1节什么是CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。