DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 100px auto;
/*background-color: yellow;*/
/*
渐变背景不是背景颜色，而是图片
所以我们需要通过background-image
或 background 来设置渐变的效果
linear-gradient() 线性渐变
radial-gradient() 径向渐变
*/
background-image: linear-gradient(red, yellow);
background-image: linear-gradient(green, blue);
/*线性渐变默认是自上向下进行变化*/
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
可以关键字来指定渐变的方向：
to top 向上渐变
to right 向右渐变
to bottom 向下渐变
to left 向左渐变
*/
background-image: linear-gradient(to left top, red, orange, yellow, greenyellow);
background-image: linear-gradient(90deg, red, orange, yellow, greenyellow);
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
默认情况下，渐变的颜色在元素中是平均分布
*/
/*
可以在颜色后，指定颜色的范围 开始位置，结束位置，这种语法不支持老版本的浏览器
*/
/*background-image: linear-gradient(red 0px 150px, yellow 150px 300px);*/
/*
颜色后边可以指定一个长度，用来指定颜色的起始位置
*/
background-image: linear-gradient(red 100px, yellow 300px);
background-image: linear-gradient(red 20%, orange 40%, yellow 60%, greenyellow 80%);
background-image: repeating-linear-gradient(red 50px, yellow 100px , orange 200px);
background-image: linear-gradient(red 100px, yellow 300px);
/*background-position: 200px 100px;*/
background: linear-gradient(greenyellow, skyblue);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
原文：https://www.cnblogs.com/eric-share/p/13733169.html