css渐变讲解（css渐变怎么用）

语法：linear-gradient(方向,颜色 位置,颜色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析： 其中位置的百分比指的是颜色结束渐变的面积。
方向取值：top，bottom left等／0deg
（如果不写方向默认为180deg／top），方向前面不要加to。

方向参数：【角度参数】

我们以红色向黄色渐变为例子：

实际显示图片如下：

给出案例：提出两个问题来理解角度

下图描述红色向绿色渐变过程，请注意两个问题

第一：角度为何是负的，代表什么含义？

第二：百分比代表什么呢？

第三：角度永远开始于渐变线，终止于水平线；顺时针为负（有点反人类）

给出3个案例进一步理解角度问题

角度的正负其表现形式就是，渐变颜色的方向问题，就是从哪个颜色到哪个颜色的问题；

角度45 颜色A，颜色B， 实际效果我们从左向右阅读（习惯问题，其实计算机解码也是这个方向），就是先A这个颜色，然后再B这个颜色；

如果是负呢？角度-45 颜色A，颜色B，就是先B这个颜色，然后再A这个颜色；

位置参数，就是面积概念这个要理解透彻

案例：我们来看看一个30*30的棋盘案例

这个案例网上一大堆，我们今天进它的原理，原理不清楚啥也干不了，请千万不要抄代码，而不懂原理，否则你是不会进步的的；

下面图片的第一个红框 请注意，任何复杂的图片都是由简单的可重复图片构成，棋盘格就是由这个红框重复组成的；

我们再思考一个问题？红框如何组成的能？ 一个白色背景，两个黑色块；我们重点关注两个黑色块如何完成，问题就解决了。