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%);

?