linear-gradient线性渐变

background:linear-gradient(180deg, sliver 20%, skyblue 80%, gray 100%);

180deg 是线性渐变的角度,水平方向;如果是90deg,则是垂直方向.

silver 20% 是最上面的颜色和该颜色所在的位置,可以为负值,,如

linear-gradient(180deg, silver -7%, pink 80%, skyblue 127%);

的效果是:

第二种参数: to left ,to top, to right, to left bottom, to left top, to right bottom, to right top.

background: linear-gradient(to left, silver 10%, pink 50%, skyblue 100%);

渐变的方向朝左:所以从右到左依次为 silver pink skyblue.(若不写位置百分之几,则颜色会均匀分布充满这个box).

特殊:

默认是从上往下渐变。但如果我们不想要渐变，就要颜色条。诀窍就是两种颜色之间不要留空隙，因为留了空隙就会出现渐变的过渡效果。

所以我们可以设置各占50%。这个50%代表颜色位置。也可以是长度单位。

background: linear-gradient(pink 50%,skyblue 50%);

background: linear-gradient(90deg,silver 0 ,silver 33%,pink 0 ,pink 67%,skyblue 0 ,skyblue 100%);