css线性渐变

css线性渐变

官方给出的语法是

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

1. 使用角度，对渐变角度进行控制
   语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。
渐变的角度从垂直方向顺时针旋转，270deg表示向左的渐变，360deg表示向上的渐变。
2. 线性渐变的颜色，起点，终点。颜色+空格+百分比或者长度值。
默认的渐变方式从上往下。百分数从0%~100%
如果有两个颜色的话，当某个颜色设置了百分比后，就会从起始位置到指定百分比的位置开始填充实色（第二个颜色的起始位置在底部，后面跟的百分比越大，填充的实色区域越小）

background-image: linear-gradient( red ,pink 90% );

当两个颜色都设置了百分比后，就会从起始位置到第一个颜色后的百分比的位置开始填充实色，后面一个颜色后的百分比减去前面一个的就是渐变的区域。
如果有很多的颜色，就平均划分。比如有四个颜色，就有三个渐变区域，相邻两个百分比之间的差值就是渐变区域。

background-image: linear-gradient( red 0%,pink 50%,green 60%,yellow);