不清楚CSS3漸變中的百分比符號

Question

我正在研究關於CSS3漸變（Link）。我無法理解以下語法

/* Firefox 3.6 to 15 */ 
    background: -moz-linear-gradient(red, yellow 10%, green 20%); 

有人可以告訴我什麼是％符號嗎？他們的範圍是什麼？第二百分比值（綠色20％）是否應該始終大於第一百分比值（黃色％）？爲什麼沒有紅色的百分比符號？

Answer 1

這裏百分號是用來相應填充背景顏色的。如果你有語法，

background: -moz-linear-gradient(red, yellow 10%, green 20%); 

這表明，它開始與紅色第一，當你添加黃色10％，現在整個背景將是1/10的背景是紅色的，紅色意味着現在紅只覆蓋10％，另外90％會變成黃色，如果增加綠色20％，則黃色和紅色會變爲20％，其他80％變爲綠色，這裏20％會分成兩部分，一部分是實際的定義爲黃色的10％，紅色自動設置爲其他10％。

Answer 2

百分比告訴我們它通過哪種顏色漸變。如果您將黃色變爲50％，則在50％處將從紅色變爲黃色。如果您將百分比值設置爲紅色，則紅色將不會開始，直到該百分比值爲止，開始時爲最終漸變顏色的固定值。如果第三個漸變色比例小於第二個，則不會顯示。如果總值小於100％，它將重複該梯度模式，直到100％爲止。