©2020-2024 ioDraw All rights reserved
1. 线性渐变（是从一个方向到另一个方向的渐变）
属性值：background：linear-gradient（颜色）
✍默认值：从上到下线性渐变：
代码：
结果：
✍ 属性延伸：
（1）改变渐变方向：
从下到上：background：linear-gradient（to top yellow,green)
从左到右：background：linear-gradient（to right yellow,green)
从右到左：background：linear-gradient（to left yellow,green)
从左上到右下：background：linear-gradient（to bottom right yellow,green)
（2）改为任意角度的渐变
属性：background：linear-gradient（50deg yellow,green)
含义是：从红色到绿色50°渐变；
0°渐变是：红色从下到上渐变为绿色；90°是从左到右；180°是从上到下；270°是从右到左
2. 径向渐变（从一个小点到四周的渐变）
属性：background：radial-gradient（颜色值）
（1）不规则颜色渐变：background:radial-gradient (yellow 30%，orange 50%，green 80%)
代码：
结果：
这个百分比的含义是，拿上面的代码说明：黄色到盒子30%的位置开始渐变为橙色，30%以前不渐变都是黄色，橙色从50%的位置开始渐变为绿色，80%以后都是纯绿色。
还有一个极端一点的：background：radial-gradient（red 50%，bule 50%）
含义是：红色从50%位置开始渐变，而50%以后都是蓝色，所以从50%-50%之间没有渐变，所以两个纯色的圆，前50%是红色，后50%是蓝色。
（2）设置渐变形状
（3）改变中心点的位置和改变渐变的大小
x轴60%，y轴40%的位置，坐标原点在左下角，，，
如果属性不好用了，可以在前面加：“-webkit-”（google浏览器特定的格式，其他浏览器可以去百度查查）
3. 重复渐变
图示：
代码：
结果：
代码：
结果：
4.太极小练习：
用到“：：before”和“：：after”伪元素，和线性渐变的知识：
代码：
结果：