CSS中的硬边渐变？答案

【问题标题】：Hard edged gradient in css?CSS中的硬边渐变？
【发布时间】：2018-04-03 17:08:56
【问题描述】：

我试图使用线性渐变在纯 css 中复制此图像。

我尝试使用渐变色标，但所有颜色都在混合。有什么办法可以让线性渐变变得硬边？

我试过了：

  background-image: -webkit-linear-gradient(left, #252525 0%, #f5f5f5 20%, #00b7b7 40%,#b70000 60%, #fcd50e 80%);

并且也没有使用这些百分比，仍然相同。

【问题讨论】：

线性渐变是从一种颜色到另一种颜色（或两种以上）平滑变化的颜色区域。
在两个直接相邻的“站点”使用相同的颜色值，例如红色从 0 到 19.999%，蓝色从 20 到 39.999%，等等。
我没有意识到我必须两次输入相同的值才能使颜色在一个范围内。谢谢你！尽管如此，在它们合并的地方，还是有模糊的。有什么办法解决这个问题？

标签： css linear-gradients

【解决方案1】：

为相邻的色标指定相同的停止位置应该会产生硬边。标准的线性渐变语法允许颜色提示（减少这种背景样式的冗长），但并非所有浏览器似乎都支持它。

hr {
  background-image: -webkit-linear-gradient(left, #252525 0%, #252525 20%, #f5f5f5 20%, #f5f5f5 40%, #00b7b7 40%, #00b7b7 60%, #b70000 60%, #b70000 80%, #fcd50e 80%);
  height: 10px;
}

&lt;hr&gt;

【讨论】：

它们之间的模糊是浏览器问题吗？因为我似乎无法删除它。还是谢谢
如果您正确设置了停止位置，我不希望在任何现代浏览器中看到颜色渐变。
检查这支笔codepen.io/anon/pen/LdBWmX我用了你的方法，合并时它模糊了。
这支笔在我看来已经够锋利了。我假设您看到的模糊来自亚像素抗锯齿？如果是这样，它正在调整颜色停止以在整个像素值上发生可能是获得您正在寻找的清晰度的唯一方法。
这应该是公认的答案。与提到的其他方法相比，效果很好，而且不像 hack。

【解决方案2】：

这样的多重渐变呢：

.line {
  height:5px;
  background-image:
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(yellow,yellow),
    linear-gradient(purple,purple);
  background-size:
    calc(1 * (100% / 4)) 100%,
    calc(2 * (100% / 4)) 100%,
    calc(3 * (100% / 4)) 100%,
    calc(4 * (100% / 4)) 100%;
  background-repeat:no-repeat;
}

<div class="line">
</div>

【讨论】：

哇，正是我想要的！虽然它有点老套，但仍然很有魅力！
@popcorn 不，这不是 hacky :) 我们只是使用多个背景而不是一个，我们可以用它做很多魔法;)
我的意思是hacky，我们仍然需要计算所有颜色的背景大小，并且必须单独定义所有渐变。不过，谢谢你的回答

【解决方案3】：

迟到了。但这是我的解决方案，您可以在颜色上设置 % 开始和停止的位置，并重叠以下将创建硬停止的颜色。

.gradient{
  height:3px;
  background-image:linear-gradient(to left, 
    #252525 0% 20%, 
    #f5f5f5 20% 40%,
    #00b7b7 40% 60%,
    #b70000 60% 80%,
    #fcd50e 80% 100%
  );
}

&lt;div class='gradient' /&gt;

【讨论】：

【解决方案4】：

您需要将停靠点设置得很近才能实现这一点，因此每个颜色值有 2 个停靠点：

background: -webkit-linear-gradient(left, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);
background: linear-gradient(to right, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);

我使用这个工具来生成 css 渐变，它很棒而且非常有用： http://www.colorzilla.com/gradient-editor/#252525+19,f5f5f5+20,f5f5f5+39,00b7b7+40,00b7b7+59,b70000+60,b70000+79,fcd50e+80,fcd50e+100

【讨论】：

这实际上很好，但我仍然可以看到模糊的线条，颜色仍然融合。有没有其他办法？
您可以使用 colorzilla 上的导入图像工具来使渐变匹配。
您可以使用小数位来使停靠点靠得更近，例如 #252525 19.9%,#f5f5f5 20% 这可能会有所帮助。我没有测试过这个跨浏览器。
@ceindeg 尝试了几次，似乎 chrome 忽略了小数。
这个Q的答案似乎可以解决你的问题：stackoverflow.com/questions/26652661/…它指向这个小提琴jsfiddle.net/cyq7grdr/11

【解决方案5】：

就用linear-gradient，你可以试试这个。

hr {
  height:10px;
  background: linear-gradient(to right, red 0% 25%, green 25% 50%, blue 50% 75%, grey 75% 100%);
};

&lt;hr&gt;

【讨论】：