平滑CSS渐变

我正在学习如何使用CSS渐变

我的问题是从上到下的渐变。你可以看到颜色变化中的“停止”

这是我的CSS代码

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

---

有没有办法在从上到下的渐变中平滑停止？（在我看来，这在从左到右或从右到左的渐变中不是很明显）

下面的css可以满足您的需要

CSS:

#header {
    width:1000px;
    height:250px;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}

了解有关线性渐变的更多信息：

查看以下内容：

background-color: #bf7a30;
background-image: linear-gradient(0deg, #bf7a30 0%, #edd599 46%, #bf7a30 100%);

---

我从

中很容易地生成了它。这种弯曲效果的主要原因实际上是颜色的线性混合，这与人眼不协调

安德烈亚斯·拉森（Andreas Larsen）在css-tricks.com（2017）上写了一篇非常详细的文章。

它通过定义近似回旋曲线的多个色块来描述非线性渐变的概念

将导致类似于（.gradient回旋线）的结果：

.gradient-wrp{
显示器：flex；
}
.标题{
宽度：100%；
高度：250px；
弹性：0 0无；
}
.梯度线性{
背景图像：线性梯度（#bf7a30 30%，#edd599）；
}
.梯度平滑{
背景图像：线性梯度（#bf7a30 25%，75%，#edd599）；
}
.梯度回旋线{
背景图像：线性梯度(
rgba（191122,48,1）0%，
rgba（191122,48,0.3）50%，
rgba（191122,48,0.15）65%，
rgba（191122,48,0.075）75.5%，
rgba（191122,48,0.037）82.85%，
rgba（191122,48,0.019）88%，
rgba（191122 48 0）100%
);
}

---

正如@nighthawk2534所提到的，为渐变添加更多颜色是一条可行之路。显然，这些必须是“正确”的颜色

我对色彩理论了解不够，但偶然发现了一个很好的工具：

对于您的示例，它给出了：

background-image: linear-gradient(to right top, #bf7a30, #ca9148, #d5a861, #e1bf7d, #edd599);

看起来是这样的：

---

（我知道此线程非常旧，但仍然可能有用）

这不是解决具有可见颜色停止的命名问题的方法。您只是建议不要在渐变之间使用颜色停止，而是将它们移动到边缘：第一个到0%，最后一个到100%。若你们像问题的作者代码那个样移动颜色停止点，你们可以看到这一点：根本并没有答案。边缘仍然可见。这不是问题的解决方案