CSS3中的块状渐变效果

Question

是否有可能使下面的渐变看起来更“块状”，以便不是逐渐从绿色切换到红色，而是按照下图所示的步骤完成？

期望效果：

目前：

#gradients {
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000));
  background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -moz-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -webkit-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: -ms-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
  background-image: linear-gradient(to right, #00FF00 0%, #FFFF00 50%, #FF0000 100%);
}

<div id="gradients" style="width:450px; height:20px"></div>

理想情况下，我可以设置一个变量，这样我就可以选择渐变所包含的块数。有人可以帮忙吗？

Answer 1

如果您想要显示某种颜色，可以使用box-shadow

#gradients {
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, 
              #fff200 104px 0px 0px 0px, 
              #ffc90e 156px 0px 0px 0px, 
              #ff7f27 208px 0px 0px 0px, 
              #ed1c24 260px 0px 0px 0px;
}

<div id="gradients"></div>

Answer 2

这可以使用linear-gradient来实现。通过分配多个色标来设置多个颜色到渐变可以通过使下一个颜色从当前颜色结束的完全相同的位置开始（即，当前颜色的结束位置的相同停止百分比）来实现块效果和下一个颜色的起始位置。）

在符合标准的浏览器中，以下是唯一需要的代码行：

background: linear-gradient(to right, green 20%, 
                            yellowgreen 20%, yellowgreen 40%, 
                            yellow 40%, yellow 60%, 
                            orange 60%, orange 80%, red 80%);

但是，为了在旧浏览器版本中产生类似效果，我们还必须包括供应商前缀版本。

div {
  height: 20px;
  width: 450px;
  background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.2, green), color-stop(0.2, yellowgreen), color-stop(0.4, yellowgreen), color-stop(0.4, yellow), color-stop(0.6, yellow), color-stop(0.6, orange), color-stop(0.8, orange), color-stop(0.8, red));
  background: -webkit-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);
  background: -moz-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);
  background: -o-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);
  background: linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);
}

<div></div>

对于 IE 9及更低版，我们必须使用this CSS Tricks article中提到的filters，因为它们不支持linear-gradient。

Can I Use - Linear Gradients

Answer 3

使用渐变的一些示例：

.gradient {
  width:450px;
  height:20px;
}
.g-1{
  background-color: #FFFF00;
}
.g-3{
  background-image: linear-gradient(
    to right,
    #00FF00 33%, #FFFF00 33%,
    #FFFF00 66%, #FF0000 66%
  );
}
.g-5{
  background-image: linear-gradient(
    to right,
    #00FF00 20%, #80FF00 20%,
    #80FF00 40%, #FFFF00 40%,
    #FFFF00 60%, #FF8000 60%,
    #FF8000 80%, #FF0000 80%
  );
}
.g-9{
  background-image: linear-gradient(
    to right,
    #00FF00 11%, #40FF00 11%,
    #40FF00 22%, #80FF00 22%,
    #80FF00 33%, #C0FF00 33%,
    #C0FF00 44%, #FFFF00 44%,
    #FFFF00 56%, #FFC000 56%,
    #FFC000 67%, #FF8000 67%,
    #FF8000 78%, #FF4000 78%,
    #FF4000 89%, #FF0000 89%
  );
}
.g-17{
  background-image: linear-gradient(
    to right,
    #00FF00 6%, #20FF00 6%,
    #20FF00 12%, #40FF00 12%,
    #40FF00 18%, #60FF00 18%,
    #60FF00 24%, #80FF00 24%,
    #80FF00 29%, #A0FF00 29%,
    #A0FF00 35%, #C0FF00 35%,
    #C0FF00 41%, #D0FF00 41%,
    #D0FF00 47%, #FFFF00 47%,
    #FFFF00 53%, #FFD000 53%,
    #FFD000 59%, #FFC000 59%,
    #FFC000 65%, #FFA000 65%,
    #FFA000 71%, #FF8000 71%,
    #FF8000 76%, #FF6000 76%,
    #FF6000 82%, #FF4000 82%,
    #FF4000 88%, #FF2000 88%,
    #FF2000 94%, #FF0000 94%
  );
}
.g-inf{
  background-image: linear-gradient(
    to right,
    #00FF00 0%,
    #FFFF00 50%,
    #FF0000 100%
  );
}

<div class="gradient g-1"></div>
<div class="gradient g-3"></div>
<div class="gradient g-5"></div>
<div class="gradient g-9"></div>
<div class="gradient g-17"></div>
<div class="gradient g-inf"></div>

Answer 4

使用多个停靠点（虽然你需要定义子步骤，但它不能自动完成）

＆＃13;

＆＃13;

#gradients {
  background-image: linear-gradient(to right, 
    green       0%,     green       14.28%,
    greenyellow 14.28%, greenyellow 28.58%,
    yellow      28.58%, yellow      42.85%, 
    orange      42.85%, orange      57.14%,
    darkorange  57.14%, darkorange  71.42%, 
    red         71.42%, red         85.71%, 
    brown       85.71%);
}

＆＃13;

<div id="gradients" style="width:450px; height:20px"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

div {
  height:200px; width:400px; display:block;
  background-image: linear-gradient(to left, #2BFF00 50%, #00A3EF 50%);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

你看到＃2BFF00的停止在50％的＃00A3EF的同一位置。

Answer 6

它也可以由Javascript动态生成。

var randomColors =  ["#CA5BBA", "#98B0EB", "#045E4F", "#11D7DD", "#44BFEC", "#80865C", "#A48D16", "#CFD00E", "#3289D0", "#15ED3D", "#48C982", "#95DB00", "#E24730", "#F8705D", "#9467EA", "#EC86AF", "#A1E9DE", "#D220CD", "#F4FE91", "#CC6869", "#DD82D3"]

function generateGradientBanding(direction, colors) {
  const gradientParts = []

  colors.forEach((color, i) => {
    gradientParts.push(`${color} ${(100 / colors.length) * i}%`)
    gradientParts.push(`${color} ${(100 / colors.length) * (i + 1)}%`)
  })

  return `linear-gradient(${direction}, ${gradientParts.join(', ')})`
}

$("#canvas").css({backgroundImage:generateGradientBanding("90deg", randomColors)})

#canvas {
  height: 100%;
  width: 100%;
}
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="canvas">&nbsp;</div>