如何使用css属性线性渐变逐渐将颜色从红色变为黄色到绿色？

Question

我想使用html，css创建图例，其中包含从绿色到黄色再到红色的颜色渐变。我试过使用CSS的线性渐变属性。但是，到目前为止，我得到的信息如下：

#color_range {
  height: 280px;
  width: 40px;
  background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
}

<div id="color_range"></div>

My code for color gradient

我需要一个这样的数字：

如何制作如上的图例？

Answer 1

只需更改：background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);

收件人：background: linear-gradient(red,yellow,green);

您也可以将其更改为：linear-gradient(to top, green,yellow,red);，但我认为to top不是必需的

#color_range {
  height: 280px;
  width: 40px;
  background: linear-gradient(red,yellow,green);
}

<div id="color_range"></div>

要了解线性梯度在CSS中的工作原理，请阅读：CSS Gradients

也请查看此页面，该页面在使用CSS渐变时可能会有所帮助：https://www.colorzilla.com/gradient-editor/

Answer 2

您可以尝试一下。

#color_range{
  height:280px;
  width:40px
  background:linear-gradient(red,yellow,green);
}

您还可以为这些颜色使用颜色代码。