<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/*
* 线性渐变
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。
终止色就是你想让浏览器去平滑的过渡过去，
并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
-默认从上到下发生渐变
linear-gradient(red,blue);
-改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,red,blue);
-使用角度
linear-gradient(角度,red,blue);
-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);
* */
div{
width: 200px;
height: 200px;
margin:100px auto;
border: 2px solid;
/*background-color:rgba(0,0,0,0.4);*/
background:linear-gradient(red 40px,blue 70px);
/*background: repeating-linear-gradient(red 0,blue 30px,red 40px);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
线性渐变
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
-默认从上到下发生渐变
linear-gradient(red,blue);
-改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,red,blue);
-使用角度
linear-gradient(角度,red,blue);
-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);
