渐变分为线性渐变和径向渐变，所谓渐变就是几种颜色之间的平稳过渡。
线性渐变
线性渐变（linear-gradient）
实现线性渐变，你至少需要定义两种颜色的结点，这两种结点就是你想平稳过渡的颜色，即：其中一种颜色结点为起点，另一种颜色结点为结束点。
书写：
background: linear-gradient(color1,color2);
color1为起点结点，color2为结束点结点。
同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的。
书写：
background: linear-gradient(direction,colro1,color2);
direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写left即可，渐变方向为从下至上，直接写bottom即可。
当然也可以对角渐变，如：从左上角到右下角，书写为background: linear-gradient(left top,color1,color2);
默认渐变方向是从上至下渐变：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -mos-linear-gradient(red,blue);
background: linear-gradient(red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
转自： https://blog.csdn.net/h15882065951/article/details/60139494
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
