[TOC] # 漸進增強 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 在線性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或著沿任何任意軸。如果你曾使用過制作圖件，比如說Photoshop，你對線性漸變并不會陌生。 兼容性問題很嚴重，我們這里之講解線性漸變 語法格式： ~~~ background:-webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)； ~~~ ~~~ background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色位置....)； ~~~ ~~~ div { width: 300px; height: 50px; /* background: linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)； */ background: linear-gradient(top, red, green); background: -webkit-linear-gradient(top, red, green); background: -moz-linear-gradient(top, red, green); /* 因為背景漸變 兼容性問題很嚴重， 必須在前面添加瀏覽器的私有前綴 */ margin: 200px auto; } section { width: 400px; height: 100px; margin: 0 auto; /* background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色位置....)； */ background: -webkit-linear-gradient(top, red 0%, green 20%, blue 80%); background: -moz-linear-gradient(left, red 0%, green 50%, skyblue 80%, hotpink 100%) } ~~~ # 優雅降級 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 | 瀏覽器前綴 | 瀏覽器 | | --- | --- | | \-webkit- | Google Chrome, Safari, Android Browser | | \-moz- | Firefox | | \-o- | Opera | | \-ms- | Internet Explorer, Edge | | \-khtml- | Konqueror | # CSS W3C 統一驗證工具 CssStats 是一個在線的 CSS 代碼分析工具 網址是： http://www.cssstats.com/ 如果你想要更全面的，這個神奇，你值得擁有： W3C 統一驗證工具：[http://validator.w3.org/unicorn/](http://validator.w3.org/unicorn/)