如何使用css 属性 linear-gradient 渐变颜色由红变黄再变绿？

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

您也可以使用这些颜色的颜色代码。