不清楚CSS3梯度中百分比％的迹象

Question

我正在研究CSS3渐变（Link）。我无法理解以下语法

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

有谁可以告诉我％标志有什么作用？它们的范围是多少？第二个百分比值（绿色20％）是否应始终大于第一个百分比值（黄色％）？为什么没有红色的百分号？

Answer 1

百分比告诉我们它渐变到那个颜色的点。如果将黄色变为50％，它将在50％点从红色渐变到黄色。如果你给百分比值为红色，红色不会开始直到百分比值，开始是最终渐变颜色的固体。如果第三个渐变颜色百分比小于第二个，则它不会显示出来。如果总值小于100％，则将重复该梯度模式，直到考虑100％。

Answer 2

这里百分号用于相应地填充背景颜色。如果你有语法，

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

它显示它首先以红色开始，背景为红色，如果你加黄色10％，现在整个背景将是红色的1/10，现在红色仅覆盖10％，另外90％将是黄色，如果你加绿色20％，那么黄色和红色将达到20％，其他80％将是绿色，这里20％将分为两个部分，一个实际上定义为10％的黄色和红色自动设置为其他10％。