背景颜色线性渐变【 linear-gradient】
语法：
background:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色);
起点：top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。
过度色：可以插入多个，表示多种颜色的渐变
demo
<style type="text/css" rel="stylesheet"> .box{ width: 100px; height: 100px; margin: 50px auto; /*从上之下线性渐变*/ /*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/ background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00); background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00); background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00); background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00); background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00); /*根据给定角度线性渐变*/ background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00); background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00); background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00); background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00); background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00); /*从左上角到右下角线性渐变*/ background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00); background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00); background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00); background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00); background: linear-gradient(top right, #0099ff, #ffffff, #00cc00); } </style> <div class="box"></div>