使用CSS线性渐变(非平滑颜色)生成纯色

2022-04-12 00:00:00 gradient css linear-gradients

假设我的线性css渐变如下:

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

它将生成如下所示的CSS渐变:

如何使用纯色制作相同的渐变,而不在颜色之间进行过渡?(使用CSS)

类似以下内容:

谢谢


解决方案

这样

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}
<div class="gradient"></div>

相关文章