[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/)