CSS3提供了一种颜色线性渐变效果
使用规则：
一定要加上浏览器私有前缀-webkit-
background: -webkit-linear-gradient(起始方向,颜色一,颜色二)
代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background: -webkit-linear-gradient(left,lightblue,lightgreen);}</style>
</head>
<body><div></div>
</body>
</html>效果图
如果没有设起始方向默认是从上到下