一、CSS3簡介

1、CSS3的現狀

(1)瀏覽器支援程度差，需要新增私有字首

(2)移動端支援優於PC端

(3)不斷改進中

(4)應用相對廣泛,逐漸要取代JS動態效果的趨勢

2、相容性

IE9+

Chrome 46+

Firefox 42+

二、新增特性

CSS3的新特徵有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字型、多背景圖、文字或影象的變形處理(旋轉、縮放、傾斜、移動)、多欄佈局、媒體查詢等。

三、優勢評價

1、減少開發成本與維護成本

在CSS3出現之前，開發人員為了實現一個圓角效果，往往需要新增額外的HTML標籤，使用一個或多個圖片來完成，而使用CSS3只需要一個標籤，利用CSS3中的border-radius屬性就能完成。這樣，CSS3技術能把人員從繪圖、切圖和優化圖片的工作中解放出來。如果後續需要調整這個圓角的弧度或者圓角的顏色，使用CSS2.1，需要從頭繪圖、切圖才能實現，使用CSS3只需修改border-radius屬性值就可快速完成修改。

CSS3提供的動畫特性，可讓開發者在先實現一些動態按鈕或者動態導航時遠離JavaScript，讓開發人員不需要花費大量的時間去寫指令碼或者尋找合適的指令碼外掛來適配一些動態網站效果。

2、提高頁面效能

很多CSS3技術通過提供相同的視覺效果而成為圖片的"替代品"，換句話說，在進行Web開發時，減少多餘的標籤巢狀以及圖片的使用數量，意味著使用者要下載的內容將會更少，頁面載入也會更快。另外，更少的圖片、指令碼和Flash檔案能夠減少使用者訪問Web站點時的HTTP請求數，這是提升頁面載入速度的最佳方法之一。而使用CSS3製作圖形化網站無需任何圖片，極大地減少了HTTP的請求數量，並且提升了頁面的載入速度。例如CSS3的動畫效果，能夠減少對JavaScript和Flash檔案的HTTP請求，但可能會要求瀏覽器執行很多的工作來完成這個動畫效果的渲染，這有可能導致瀏覽器響應緩慢致使使用者流失。因此，在使用一些複雜的特效時需要考慮清楚。其實很多CSS3技術能夠在任何情況下都大幅提高頁面的效能 。

CSS3將完全向後相容，所以沒有必要修改的設計來讓它們繼續運作。網路瀏覽器也還將繼續支援CSS2 。

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊