元素的渐变
一、渐变的概念
渐变就是多种颜色平缓变化的一种显示效果
渐变的主要因素是色标。色标是一种颜色及其出现位置的组合。一个渐变是由多个色标组成（至少两个）。
渐变种类：线性渐变、径向渐变、重复渐变
1、线性渐变
线性渐变：以直线的方向来填充渐变色，如下图
2、径向渐变：指以圆形的方式来填充渐变色。填充方向以圆心为中心，延半径向外渐变
3、重复渐变
将线性渐变或径向渐变，重复几次实现渐变填充
二、线性渐变
1、基础线性渐变：需要设置两个或两个以上的颜色，颜色之间使用“,”分隔，颜色会平均分配，根据设置颜色的顺序进行渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background: linear-gradient(red, black);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果
上述的例子是基础线性渐变的例子，其实就是进阶渐变的默认模式，设置两个颜色，默认从起点色标渐变到终点色标
2、进阶线性渐变
我们可以通过进阶线性渐变来更加细粒度的控制渐变，格式如下
background: linear-gradient(color1 percent/pixel,color2 percent/pixel);先修改background属性如下
background: linear-gradient(red 70%, black 100%)效果图
可以发现从0~70%都是纯色的红色，从70%到100%是红色到黑色的渐变
接下来把background设置成如下值
background: linear-gradient(red 70%, black 70%);效果
linear-gradient(color1 degree1， color2 degree2)
对上述的参数进行下解释
color1：起点色标值
degree1：从0%到degree1的部分都用color1填充，取值可以是百分比或具体的像素值
color2：结束色标值
degree2：从degree2到100%的部分都用color2填充，跟color1没有有重叠的部分进行渐变，也就是degree1到degree2部分进行渐变，取值可以是百分比或具体的像素值
例如：background: linear-gradient(red 70%, black 100%);表示从070%是红色，从100%开始是黑色，从70%100%是红到黑的渐变色
3、设置渐变方向
另外还可以设置线性渐变方向，默认从上到下，设置参数在起点颜色前面传递参数
background: line-gradient(to left top, red 150px, black 300px);上述的css属性会设置一个从右下角到左上角的线性渐变，颜色从红到黑0150px是纯红色，150px300px是红色到黑色的渐变色，从300px到最后是纯黑色
也可以通过第一个参数设置角度，同样可以实现渐变方向，顺时针为正数，逆时针为负数
background: line-gradient(45deg, red 150px, black 300px);上述属性设置是设置一个顺时针旋转45度后的线性渐变效果，效果如下
4、设置多个颜色
background: linear-gradient(color1 percent/pixel,color2 percent/pixel,color3 percent/pixel,...);通过设置线性渐变可以实现一些特殊的效果，比如信封的边框效果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 10px solid transparent;
background: linear-gradient(#fff,#fff) padding-box,
repeating-linear-gradient(
-45deg,
red 0,
red 10px,
transparent 10px,
transparent 20px,
blue 20px,
blue 30px,
transparent 30px,
transparent 40px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>效果
二、径向渐变
径向渐变-由他们的中心定义，同样是修改background-image属性，只不过值为rradial-gradient()命令。
radial-grident()命令的语法格式如下：radial-gradient([半径长 at 圆心位置], 色标1, 色标2, …)。
其中，半径长是一个数值，单位px，表示渐变扩散的范围大小。位置，表示渐变中心点的坐标
基础径向渐变：需设置两个及两个以上的颜色，颜色之间用","间隔，颜色会平均分配，根据设置颜色的顺序，进行渐变
下面通过例子来了解一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-image: radial-gradient(red, black);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>效果
我们可以看到默认是以元素的中心点为圆心，元素宽的一半为半径
接下来我们调整一下参数来看看显示效果有什么变化
调整圆心点
background-image: radial-gradient(150px at top left, red, black);效果
半径长还可以设置一些常量：closest-side/farthest-side/closest-corner/farthest-corner
closest-side:半径长度为从圆心到离圆心最近的边
farthest-size:半径长度为从圆心到离圆心最远的边
closest-corner:半径长度为从圆心到离圆心最近的角
farthest-corner:半径长度为从圆心到离圆心最远的角
我们可以通过例子加深一下印象
background-image: radial-gradient(closest-side at 60% 30%, red, black);效果
也可以给径向渐变设置多种颜色，例如
background-image: radial-gradient(400px at top left, blue 0%, yellow 50%, red 100%);效果
三、应用场景
这种功能的使用场景我个人感觉实际使用的地方比较少，大家有个认识，后续如果有需要的时候再回来查看。