渐变分为线性渐变和径向渐变，所谓渐变就是几种颜色之间的平稳过渡。
线性渐变 线性渐变（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
