因为不喜欢背公式，希望能找到更容易理解和推理的记忆方法。感觉CSS3渐变的属性构成不太好记，所以今天终于挖到了这个。坑，其实也没什么特别的，嘻嘻，如有错误，欢迎指出。基本用法我们一般在添加背景的时候都会用到这种渐变效果。渐变效果分为linear-gradient（线性渐变）和radial-gradient（径向）。当然，本文主要围绕linear-gradient展开。语法如下：background:linear-gradient(direction,color1,color2,...);因为可以传入多种颜色，所以这里列出了一个大列表。另外，兼容前缀有多种写法，语法略有不同，但这里是标准形式，即不带前缀~用法示例：linear-gradient(red,blue);linear-gradient(to右，红，蓝）；线性渐变（180度，红，蓝）；线性渐变（180度，红10%，蓝20%）；方向有两种写法，可以写上、下、左、右，也可以写具体的角度。如果不写方向，默认是up->down:background:linear-gradient(red,blue);使用方向词到某个方向（目的地）这里的值可以是简单的top，也可以是像topleft（左上）这样的组合。提示：改变左上搭配词的顺序也没有效果。而它的方向就是瞄准这个目的地，直接在那里发射。例子：发射到右下角（rightbottom/bottomright）~background:linear-gradient(torightbottom,red,blue);角度范围：可负可正！它会执行%360deg的计算，所以0deg和360deg/-360deg是一样的。角度的判断：让我们回到没有填充方法的时候，渐变是red(1)->blue(2)，但是在0deg的情况下，渐变的方向是blue(2)->red(1):background:linear-gradient(0deg,red,blue)经过反复实验，会发现这个角度不像transform的旋转角度，也可以认为是发射角度:所以，可以认为是像这个这样的角度如图，你可以以红色为起点，然后以一定的角度发射。所以在默认不写方向的情况下，linear-gradient(red,blue);这个角度实际上相当于线性渐变（180度，红色，蓝色）。关于百分比，我们在写颜色的时候，后面可以加一个百分比。MDN中对这个百分比的解释是：渐近线的颜色终止点在这个位置有特定的颜色。该位置可以指定为线长度的百分比或绝对长度。您可以指定任意数量的色标以获得所需的效果。说实话，我觉得这个解释还是比较模糊的。我个人认为这个终点应该是渐变的终点，所以开始了一点研究（怕被打扰思维的童鞋这里直接跳过，我们看最后一段（怕被打？）），但是颜色还是有起点的，所以我们来实验一下：1.linear-gradient(toright,red0%,blue0%)因为red设置0%为终点，根据计算，blue应该start是从0%开始，而blue也将0%设置为渐变的终点，所以blue被完全占据，没有渐变。Gradientrange:0%~0%bluecolorrange:0%~100%2.linear-gradient(toright,red10%,blue0%)整个div的宽度为200px，红色为10%，可以发现它截掉的地方正好是200*10%=20px，但是蓝色的渐变结束点是0。想象一下，好像红色的部分覆盖了蓝色的开始，所以这时候就没有渐变了，如果蓝色<=10%，则不会有这样的渐变。渐变范围：10%~0%（大于起点，所以不存在）蓝色范围：10%~100%3.linear-gradient(toright,red0%,blue10%)所以，如果blue是10%，根据计算，蓝色应该从0%开始，但是渐变的终点是10%，所以会有10%长度的渐变。Gradientrange:0%~10%bluecolorrange:0%~100%4.来个复杂的情况：linear-gradient(toright,red40%,blue50%,yellow60%);首先，红色部分在40%%停止，蓝色渐变在50%结束，所以中间有10%的渐变，蓝色和黄色的部分也有10%的渐变。红色范围：0%~50%红蓝渐变范围：40%~50%蓝色范围：50%~50%（渐变范围赋予其一定的纯色区域）蓝黄渐变范围：50%~60%yellowColorrange:50%~100%5.linear-gradient(toright,red40%,blue50%,yellow0%);将黄色部分设置为0%，即黄色渐变结束于0%，此时蓝色部分正好是容器的一半（50%）。红蓝渐变范围：40%~50%蓝色渐变范围：50%~50%（因为红蓝渐变存在纯色区域）蓝黄渐变范围：50%~0%（无效）黄色colorrange:50%~100%目前，这个推理是合理的→_→，当然，这只是我的推理（嗯）。然后找了一篇文章：https://segmentfault.com/a/11...，里面有详细的说明和资料，总结一下：百分比指的是某个颜色值从起点开始的位置。渐变过渡区域的比例是总空间（高度或宽度）减去上下两个彩色块的剩余空间。如果一个色标的位置值小于整个列表中它之前的色标的位置值，则该色标的位置值将被设置为所有色标位置值的最大值颜色停在它前面。这是一个权威的说法，而且很容易理解？（今天就来这里自娱自乐吧，嘻嘻）。
