css - css 中的硬边渐变？

Question

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

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

我试过:

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

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

Answer 1

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

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>