摘要：渐变范围颜色范围整个的宽度是，是，可以发现它截止的地方正好是，但是的渐变终点是。渐变过渡区的占比为总的空间高度或宽度减去上下两个着色块空间占比剩下的空间。
因为我不喜欢背公式，希望自己能找到比较容易理解和推理的记忆方式吧，很早就感觉CSS3渐变的属性组成不太好记忆，所以今天终于挖了这个坑，其实也没什么很特别的，嘻嘻，如果有错误欢迎提出。
基本用法我们一般都是在添加background的时候会用到这个渐变效果，渐变效果分为linear-gradient（线性渐变）和radial-gradient（径向）。
当然这篇文章主要是围绕linear-gradient展开的。
语法如下：
background: linear-gradient(方向, 颜色1, 颜色2, ...);
因为可以传入多个颜色，所以这里就是一大串了。
另外还有多个兼容前缀的写法，语法也有细微的不同，但是这里就讲的是标准形式，也就是没有前缀的~
示例用法：
linear-gradient(red, blue); linear-gradient(to right, red , blue); linear-gradient(180deg, red, blue); linear-gradient(180deg, red 10%, blue 20%);关于方向
方向有两种写法，可以是写top、bottom、left、right，也可以是写具体的角度。
不写方向默认情况下是上->下：
background: linear-gradient(red,blue);使用方向单词
to 某个方向（目的地）
这里的值可以是单纯的top，也可以是如top left（左上）这样的组合搭配。
Tip：left top搭配中词语的顺序变换也没有影响。
而它的方向就是以这个目的地为目标，径直发射过去。
举例：
向右下角（right bottom / bottom right）发射过去啦~
background: linear-gradient(to right bottom, red , blue);使用角度
角度的范围：
可以是负数到正数！它会进行%360deg的运算，所以0deg和360deg/-360deg是一样的啦。
角度的判断：
让我们先回到不填写方法的时候，渐变是red(1)->blue(2)，但是在0deg的情况下，渐变方向是blue(2)->red(1)：
background: linear-gradient(0deg , red , blue)
随后多次实验会发现，这个角度其实不像transform那种旋转的角度，同样也可以认为是一个发射的角度：
所以呀，就可以认为是像这张图一样的，可以把red作为自己的出发点，然后对着某个角度发射过去。
所以在不写方向的默认情况下，linear-gradient(red,blue);这个角度其实相当于是linear-gradient(180deg, red,blue)。
我们在写颜色的时候后面可以在接一个百分比，这个百分比在MDN中的解释是：
渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。
说实话，我感觉这个解释还是比较模糊，我个人觉得这个终点应该是渐变的终点，所以我开始了小探究（怕被打扰思维的童鞋直接跳过这里，看最后一段吧（怕被打?）），但同样还是要存在一个颜色开始的起点，所以来实验一下：
1.
linear-gradient(to right, red 0%, blue 0%)
因为red设置了0%为终点，按照计算blue应该从0%开始，而blue也同样设置0%为渐变终点，所以blue就全部都占满了，且不存在渐变。
渐变范围：0%~0%
blue颜色范围：0%~100%
2.
linear-gradient(to right, red 10%, blue 0%)
整个div的宽度是200px，red是10%，可以发现它截止的地方正好是200*10%=20px，但是blue的渐变终点是0。想象一下，就好像红色部分把蓝色的开头给遮住了，所以这个时候没有产生渐变，同样如果blue <= 10%都不会有这个渐变。
渐变范围：10%~0%（大于起点，所以不存在）
blue颜色范围：10%~100%
3.
linear-gradient(to right, red 0%, blue 10%)
So，如果blue是10%，按照计算，蓝色应该从0%的位置开始，但是渐变的终点是10%，所以会有10%长度的渐变出现。
渐变范围：0%~10%
blue颜色范围：0%~100%
4.
来个复杂的情况：
linear-gradient(to right, red 40%, blue 50%,yellow 60%);
首先红色部分在40%的时候止步，蓝色的渐变到50%的时候才结束，所以中间有10%的渐变，同理蓝色和黄色部分也有10%的渐变。
red范围：0%~50%
red-blue渐变范围：40%~50%
blue范围： 50%~50%（渐变范围给予了它一定的纯色区域）
blue-yellow渐变范围：50%~60%
yellow颜色范围：50%~100%
5.
linear-gradient(to right, red 40%, blue 50%,yellow 0%);
把黄色部分设为0%，也就是黄色渐变在0%的时候就结束了，这个时候到蓝色部分正好是容器的一半（50%）。
red-blue渐变范围：40%~50%
blue颜色范围：50%~50%(因为red-blue渐变而有了一段纯色区)
blue-yellow渐变范围：50%~0%（无效）
yellow颜色范围：50%~100%
目前看来，这个推理是合理的→_→，当然啦这里还只是我的推理（唔）。然后我找到了一篇文章：https://segmentfault.com/a/11...，有详细的说明和资料，总结来说就是：
百分比是指某个颜色值距离起点的开始位置。
渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。
这是权威的说法哦，也很好理解?（今天就自娱自乐到这里吧，嘻嘻）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113075.html
摘要：问题起源以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。继续试验我们可以尝试改变的值，去看看位置的变化。为了方便我们计算，另外写了一个类似的布局，内容区的宽度是，三个的宽度也都是。 问题の起源 以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。这是一个我从别人写的文章中复制过来的，关于圣杯布局的比较简单的说明 通过缩放页面就...
摘要：构造函数构造操作符调用的函数就是构造函数。其和其构造函数的指向相同。而构造函数属性指向的对象带有属性，指向函数自身。，回归构造函数继承，仔细看看诞生的嘻嘻和哈哈两位同学可以看到两个实例都拥有了和两个属性，因为方法的运行类似于执行了和。 最近在看《JavaScript设计模式》，然后开篇复习了JavaScript中的几种继承方式，自己似乎也没有怎么仔细探究过，目前自己没怎么碰到过应用的场...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 简介 heading 标签、SEO、无障碍阅读 ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。 在学习 HTML 标签的时候，很多教程只告诉你 怎么用 而没有讲清楚 是什么，让我们一起从 h1 到 h6 开始重新认识 HTM...
摘要：属性特性描述可选值，布尔值，默认值为，启用过滤器为不启用过滤器。正常显示，内容对象将翻过来。，设置对象是否投影，布尔值，和，设置对象投影不透明度，，假如为那么该值无效。 前言 前段时间在做一个专题的时候用到了opacity不透明度属性，因为设计图上是半透明背景，白色文字 showImg(https://segmentfault.com/img/bVknaX); 所以在IE用到了其...
摘要：参考资料首先，网页大小与浏览器窗口大小从来都不是一回事这尼玛最近才明白，坑所以，要知道以下常网页的范围我们在代码里面设置的或者脚本，改变的样式就是网页范围下的改变，也就是说，我们设置的大小是网页的不是浏览器窗口的大小。 参考资料 首先，网页大小与浏览器窗口大小从来都不是一回事！！！这尼玛最近才明白，坑~ 所以，要知道以下常: 网页的范围我们在代码里面设置的CSS或者js脚本，改变的样式...
阅读 1916·2021-11-23 09:51
阅读 1245·2019-08-30 15:55
阅读 1612·2019-08-30 15:44
阅读 758·2019-08-30 14:11
阅读 1145·2019-08-30 14:10
阅读 914·2019-08-30 13:52
阅读 2629·2019-08-30 12:50
阅读 614·2019-08-29 15:04
