<!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>
</head>
<style>
#div1 {
width: 500px;
height: 500px;
/* 设置背景的渐变色
渐变可以设置一些复杂的颜色，可以实现从一个颜色向其他颜色过渡的效果
渐变通过background-image来设置
线型渐变，颜色沿着一条直线发生变化
linear-gradient( )
linear-gradient(red,yellow)红色开头，黄色在结尾，中间是过渡区域
现象渐变的开头，我们可以指定一个渐变方向
to left
to right
to bottom
to top
deg表示度数
*/
/*
background-image: linear-gradient(to left, yellow, chartreuse);
可以同时指定多个颜色
background-image: linear-gradient(red, blue, green, yellow);
px可以设置颜色在元素中起始的一个位置，比如0px-400px中间的部分就是过渡区域
background-image: linear-gradient(red 0px, blue 400px);
*/
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
