CSS3 簡介

提起 CSS 我們不會太陌生，我們 Web 頁面的樣式離不開它，而 CSS3 是 CSS 技術升級版本。

對于 CSS3 我們在前端開發的工作中有大量的應用，它主要就是對普通 CSS 樣式的一種補充。如果說 HTML 標簽是頁面的骨架， CSS 是頁面的皮膚， 那么 CSS3 就是頁面的靈魂， 它豐富了頁面的交互和顯示效果。

1. 什么是 CSS3 ？

它其實是 CSS 不停升級的演變，早在 2001 年 W3C 就完成了 CSS3 的草案規范。CSS3 規范的一個新特點是被分為若干個相互獨立的模塊。一方面分成若干較小的模塊較利于規范及時更新和發布，及時調整模塊的內容，這些模塊獨立實現和發布，也為日后 CSS 的擴展奠定了基礎。另外一方面，由于受支持設備和瀏覽器廠商的限制，設備或者廠商可以有選擇的支持一部分模塊，支持 CSS3 的一個子集，這樣有利于 CSS3 的推廣。

我們日常工作中其實 CSS 和 CSS3 是在一起使用的，有時候你甚至不知道已經使用了 CSS3 。因為 CSS3 就是 CSS 升級演變的產物。

2. 為什么要學習 CSS3 ？

我們學習它肯定需要一個理由，最直觀的就是前端已經進入了圖形化時代，豐富的頁面效果在使用 CSS2 實現成本很高。其次，使用 CSS3 可以輕松完成動畫或者過渡效果，遠離腳本實現動畫，讓我節省開發時間。

CSS3 技術可以代替很多圖片，減少標簽的嵌套，這意味著頁面的標簽更少，靜態資源請求數減少，這就意味著我們打開頁面的時間更快更好。

最后，CSS3 做到了向后兼容，在低版本瀏覽器中它不會打亂原有的布局，最多就是不起作用。

3. CSS3 各個模塊發展進程

參考文獻：百度百科

4. CSS3 新增特性

1. 邊框特性： 增加了圓角的定義和圖片邊框，它給了設計師更多的設計空間，在以前所有的元素都是方的，如果我們想要使用漂亮的邊框只能使用背景圖，這就無形中給服務器帶來了壓力。

2. 多背景圖： 現在我們一個元素上可以使用多張背景圖了。

3. 顏色： 現在我們不但可以使用線性漸變和徑向漸變，還可以設置顏色的透明度，在不借助背景圖的情況下可以創建更多的色彩。

4. **多列布局和彈性盒模：**讓我們不再像以前那樣為了布局大盒子套小盒子，定位 和 浮動 傻傻分不清楚，它可以說是前端布局的革命。

5. 空間上增加了 2D 和 3D 空間。

6. 過渡和動畫。

7. web字體，我們可以告別千篇一律的微軟雅黑了。

8. 媒體查詢，現在在不同的分辨率下我們不再通過 JS 去控制樣式了。

9. 豐富的陰影效果。多用于 hover，懸浮等場景。

5. 學習基礎

1. 有一定的 CSS 語法基礎。

2. 了解 HTML 基本的一些元素，如： div h1-h6 a span i 這些簡單的標簽。

3. 了解 class id 這類基礎元素選擇器。

6. 兼容性

目前 Chrome 、　Firefox 、IE 9+ 基本上支持了大部分的 CSS3 特性，我們可以放心的使用了。對于支持性不好的也可以使用前綴。