CSS3 簡介

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

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

1. 什么是 CSS3 ？

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

我們?nèi)粘９ぷ髦衅鋵?shí) CSS 和 CSS3 是在一起使用的，有時(shí)候你甚至不知道已經(jīng)使用了 CSS3 。因?yàn)?CSS3 就是 CSS 升級演變的產(chǎn)物。

2. 為什么要學(xué)習(xí) CSS3 ？

我們學(xué)習(xí)它肯定需要一個(gè)理由，最直觀的就是前端已經(jīng)進(jìn)入了圖形化時(shí)代，豐富的頁面效果在使用 CSS2 實(shí)現(xiàn)成本很高。其次，使用 CSS3 可以輕松完成動畫或者過渡效果，遠(yuǎn)離腳本實(shí)現(xiàn)動畫，讓我節(jié)省開發(fā)時(shí)間。

CSS3 技術(shù)可以代替很多圖片，減少標(biāo)簽的嵌套，這意味著頁面的標(biāo)簽更少，靜態(tài)資源請求數(shù)減少，這就意味著我們打開頁面的時(shí)間更快更好。

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

3. CSS3 各個(gè)模塊發(fā)展進(jìn)程

參考文獻(xiàn)：百度百科

4. CSS3 新增特性

1. 邊框特性： 增加了圓角的定義和圖片邊框，它給了設(shè)計(jì)師更多的設(shè)計(jì)空間，在以前所有的元素都是方的，如果我們想要使用漂亮的邊框只能使用背景圖，這就無形中給服務(wù)器帶來了壓力。
2. 多背景圖： 現(xiàn)在我們一個(gè)元素上可以使用多張背景圖了。
3. 顏色： 現(xiàn)在我們不但可以使用線性漸變和徑向漸變，還可以設(shè)置顏色的透明度，在不借助背景圖的情況下可以創(chuàng)建更多的色彩。
4. **多列布局和彈性盒模：**讓我們不再像以前那樣為了布局大盒子套小盒子，定位 和 浮動 傻傻分不清楚，它可以說是前端布局的革命。
5. 空間上增加了 2D 和 3D 空間。
6. 過渡和動畫。
7. web字體，我們可以告別千篇一律的微軟雅黑了。
8. 媒體查詢，現(xiàn)在在不同的分辨率下我們不再通過 JS 去控制樣式了。
9. 豐富的陰影效果。多用于 hover，懸浮等場景。

5. 學(xué)習(xí)基礎(chǔ)

1. 有一定的 CSS 語法基礎(chǔ)。
2. 了解 HTML 基本的一些元素，如： div h1-h6 a span i 這些簡單的標(biāo)簽。
3. 了解 class id 這類基礎(chǔ)元素選擇器。

6. 兼容性

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