css 中的硬边渐变？

Question

我试图使用线性渐变以纯 css 的形式复制此图像。

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

我试过：

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

也没有使用这些百分比，仍然是一样的。

Answer 1

您需要将停止点设置在一起以实现此目的，每个颜色值设置 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

Answer 2

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

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

<hr>

Answer 3

像这样的多重渐变怎么样：

.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>

Answer 4

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

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

<div class='gradient' />

Answer 5

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

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

<hr>

css 中的硬边渐变？

Hard edged gradient in css?

css

linear-gradients