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

?

180deg 是線性漸變的角度,水平方向;如果是90deg,則是垂直方向.

silver 20% 是最上面的顏色和該顏色所在的位置,可以為負(fù)值,,如

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

?的效果是:

第二種參數(shù): 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).

特殊:

默認(rèn)是從上往下漸變。但如果我們不想要漸變，就要顏色條。訣竅就是兩種顏色之間不要留空隙，因?yàn)榱袅丝障毒蜁霈F(xiàn)漸變的過渡效果。

所以我們可以設(shè)置各占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%);

?

轉(zhuǎn)載于:https://www.cnblogs.com/hcy168/p/5861952.html

總結(jié)

以上是生活随笔為你收集整理的linear-gradient线性渐变的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。