大家好，我是wawjf~~
哎呦
今天要讲的是van-van梯度，这是一个比较NB的操作。
我们先来看看这个问题是关于什么的：
线性梯度线性梯度径向梯度径向梯度重复线性梯度
重复径向梯度
线性梯度
重复径向梯度
下面说说我们日常生活中看到的渐变。
彩虹3354的线性渐变
还有波纹状的中央梯度3354。
还有无脑娃娃渐变——。
这就像引力波
enter;”>
闪瞎你的靓眼
【禁止套娃！】
嗯，它就对应了今天讲的四种属性——
1. linear-gradient 线性渐变
没错，这种效果学名叫做线性渐变~
按人话讲，就是一条一条线的渐变
注意：linear-gradient是放在background-image里面用的哦，用法如下：
background-image: linear-gradient(direction, color-stop1, color-stop2,...);第一个参数：direction，即角度，可以为方向英文（如bottom right 即右下）或者角度（如180deg 即180°）
第二个参数（第n个参数），为颜色，即要过渡的颜色，爱填啥填啥。
我们重点来讲一讲这个direction参数。
1）
首先作为方向参数。
先讲讲意思，在这里，方向表示渐变终点。
比如bottom right表示终点为右下角，那么起点就在左上角。
然后要注意一点：使用方向参数的时候要加上to作为前缀哦，比如 to bottom right，to bottom left 。
2）
其次就是作为角度了。
角度比较好理解，就是这条线的角度，以默认值为标准（水平线，就是横的）
————-
懂了吧
进入实战，比如我们要做一个从左上到右下角的线性渐变，渐变颜色为红，黄，绿，那么代码就如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow , green);}</style></head><body><div id="grad1"></div></body></html>
注：linear-gradient不适用于IE8以前的版本。
效果如下：
2. radial-gradient 径向渐变
径向渐变由中心点定义。
人话就叫做中心渐变，吃货可能会叫成甜甜圈（误）
就像开头的第二幅图那样，一圈一圈的，向外扩散（不是向内哦），用法如下：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);一模一样的配方，只不过名字变了。
但是我们还是要重点来讲一下shape size at position（以下称作sp）
sp有几种用法：
第一种：shape类，两个值
-
ellipse（椭圆展开）
-
circle（正圆展开）
第二种：
1. farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
2. closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
3. closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角
4. farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
会有点复杂，反正我们基本都不用的，就是因为太复杂。。。
好了，上实例代码~
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#grad1 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */}#grad2 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */}</style></head><body><div id="grad1"></div><div id="grad2"></div></body></html>
这次我们特意混合了椭圆渐变和圆形渐变的效果，这样方便比对。
椭圆渐变效果如下：
圆形效果如下：
区别还是能看得出来的吧~~
3. repeating-linear-gradient repeating-radial-gradient
没错，这就是我们的两位 套娃渐变
。。。
—-抬棺运走—-
没错，这就是我们的两位重复线性渐变和重复径向渐变，俗称，套娃渐变
效果就看最前面的两个吧，我们直接给出它们的源码：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#grad1 {height: 200px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}</style></head><body><div id="grad1"></div></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#grad1 {height: 200px;background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%);}</style></head><body><h3>重复线性渐变</h3><div id="grad1"></div></body></html>
好了，有问题可以在私信公众号询问哦~我们看到就会回复的~~
作者：
Алексей
四五帮帮主，四五dark♂帝国元首（划掉）
喜欢HTML/CSS/JS
07年出生，福建福州人，未来的程序员
素描八级，但是还是要请美工
本来想做小程序，结果开了个公众号天天在那边写稿
（PS：名字读作：阿列克谢）
wawjf
（我爱微积分）
与楼上同班同学，都是很hj的人（是的）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
如果想看到往期教程，点击下方菜单就好了啦~
HTML教程：输入HTML或者菜单点击；
CSS教程：输入CSS或者菜单点击；
JS教程：输入JS或者菜单点击；
每期一题：输入每期一题或者菜单点击（点JS教程）
如果输入错误不会得到回复哦~
