CSS3 教程

CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進階版，拆分和增加了盒子模型、列表模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等。

CSS3的改變有很多，增加了文字特效，豐富了下劃線樣式，加入了圈重點的功能。在邊框方面，有了更多的靈活性，可以更加輕松地操控漸變效果和動態效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且網絡瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕松。

溫馨提示：如果您想通過邊學邊練的方式學習CSS，那么請您移步CSS3微課！

如果您覺得CSS的學習難度較高，不易理解，建議您采用視頻教程進行學習：CSS3視頻課程

學習CSS3，自然是要搭配著html5以及javascript一起進階，這樣才能夠更加全面地掌握到建站技術。

本書知識點

• CSS3 邊框
• CSS3 圓角
• CSS3 背景
• CSS3 漸變
• CSS3 陰影
• CSS3 選擇器
• CSS3 文本效果
• CSS3 字體
• CSS3 動畫
• CSS3 用戶界面
• CSS 圖片
• CSS 按鈕
• CSS3 多媒體

CSS3生成工具

• CSS3 Maker：http://www.css3maker.com/
• CSS3 Generator：http://www.css3.me/
• CSS3 Drop shadow generatr：http://www.cssmatic.com/box-shadow
• CSS3代碼生成器：http://www.realmoneymillionaire.com/tools/index?name=layerstyles
• CSS3圓角生成器：http://www.realmoneymillionaire.com/tools/index?name=circularbead

CSS3調試工具

• Modernizr,HTML5/CSS3 特性檢測庫：http://modernizr.cn/
• CSS3 transform(變形)和transform-origin(變形原點)調試工具：http://www.realmoneymillionaire.com/tools/index?name=css3_transform
• CSS3 Text Stroke(文本描邊)和text-fill-color(文本填充色)調試工具：http://www.realmoneymillionaire.com/tools/index?name=css3_textstroke
• CSS3 border-radius(圓角)效果在線調試工具：http://www.realmoneymillionaire.com/tools/index?name=css3_borderradius
• CSS3 Text Shadow(文本陰影)效果在線調試工具：http://www.realmoneymillionaire.com/tools/index?name=css3_textshadow
• CSS3 Box Shadow(陰影)效果在線調試工具：http://www.realmoneymillionaire.com/tools/index?name=css3_boxshadow
• Firefox的Linear Gradients (線性漸變)在線調試工具：http://www.realmoneymillionaire.com/tools/index?name=moz_LinearGradients