第一章 初識CSS3
什么是CSS3？
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以后也開始全面支持CSS3了。
在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。
| 前綴 | 瀏覽器 |
|---|---|
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
CSS3能做什么
CSS3給我們帶來了什么好處呢？簡單的說，CSS3把很多以前需要使用圖片和腳本來實現的效果、甚至動畫效果，只需要短短幾行代碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。
CSS3簡化了前端開發工作人員的設計過程，加快頁面載入速度。
CSS3都有哪些強大功能呢？
- 選擇器: 以前我們通常用
class、ID或tagname來選擇HTML元素，CSS3的選擇器強大的難以置信。它們可以減少在標簽中的class和ID的數量更方便的維護樣式表、更好的實現結構與表現的分離。 - 圓角效果:以前做圓角通常使用背景圖片，或繁瑣的元素拼湊，現在很簡單了
border-radius幫你輕松搞定。 - 塊陰影與文字陰影:可以對任意DIV和文字增加投影效果。
- 色彩:CSS3支持更多的顏色和更廣泛的顏色定義。新顏色CSS3支持HSL、CMYK、HSLA and RGBA。
- 漸變效果:以前只能用Photoshop做出的圖片漸變效果，現在可以用CCS寫出來了。IE中的濾鏡也可以實現。
- 個性化字體:網頁上的字體太單一？使用
@Font-Face輕松實現定制字體。 - 多背景圖:一個元素上添加多層背景圖片。
- 邊框背景圖:邊框應用背景圖片。
- 變形處理:你可以對HTML元素進行旋轉、縮放、傾斜、移動、甚至以前只能用JavaScript實現的強大動畫。
- 多欄布局:可以讓你不用使用多個div標簽就能實現多欄布局。瀏覽器解釋這個屬性并生成多欄，讓文本實現一個仿報紙的多欄結構。
- 媒體查詢:針對不同屏幕分辨率，應用不同的樣式。
