如何使用css属性linear-gradient逐渐将颜色从红色变为黄色再变为绿色？答案

【问题标题】：How to use css property linear-gradient to gradually change color from red to yellow to green?如何使用css属性linear-gradient逐渐将颜色从红色变为黄色再变为绿色？
【发布时间】：2019-11-16 02:22:34
【问题描述】：

我想使用 html、css 创建一个图例，其中包含从绿色到黄色到红色的颜色渐变变化。我尝试过使用 css 的线性渐变属性。但是，我到目前为止得到的内容如下：

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

&lt;div id="color_range"&gt;&lt;/div&gt;

My code for color gradient

我需要这样的图：

如何制作像上面这样的图例？

【问题讨论】：

标签： html css colormap

【解决方案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);
}

&lt;div id="color_range"&gt;&lt;/div&gt;

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

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

【讨论】：

【解决方案2】：

你可以试试这个。

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

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

【讨论】：