第一章 初識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。

• 漸變效果:以前只能用做出的圖片漸變效果，現在可以用CCS寫出來了。IE中的濾鏡也可以實現。

• 個性化字型:網頁上的字型太單一？使用@Font-Face 輕鬆實現定製字型。

• 多背景圖:一個元素上新增多層背景圖片。

• 邊框背景圖:邊框應用背景圖片。

• 變形處理:你可以對HTML元素進行旋轉、縮放、傾斜、移動、甚至以前只能用JavaScript實現的強大動畫。

• 多欄佈局:可以讓你不用使用多個div標籤就能實現多欄佈局。瀏覽器解釋這個屬性並生成多欄，讓文字實現一個仿報紙的多欄結構。

• 媒體查詢:針對不同螢幕解析度，應用不同的樣式。

作者：阿振_sc
連結：