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>

理想情况下，我希望能够设置一个变量，以便选择渐变由多少个块组成。有人可以帮忙吗？

- yesman

---

你可以像 这个例子 一样提供多个颜色停止点和百分比。不过我不确定是否清楚理解了你的问题。 - Harry

谢谢Harry，如果你把你的链接作为答案发布，我会接受它！它使用了所有答案中最少的代码，同时达到了我想要的效果。 - yesman

@Bas：我已经将css-shapes标签添加到这个问题中，尽管这不完全是一个形状问题，但我觉得这些答案中的方法可以帮助未来可能想要使用单个元素创建多个不同颜色但相邻块的用户。如果您认为不合适，请随时回滚 :) - Harry

Answer 1

这可以通过使用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及以下版本，我们需要使用像这篇CSS Tricks文章中提到的filters，因为它们不支持linear-gradient。 Can I Use - Linear Gradients。

- Harry

---

请注意，如果您正在进行大规模操作（例如完整的浏览器宽度），则可以开始在实心块之间看到一些模糊。 - fredrivett

Answer 2

如果您想显示某种颜色，可以使用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>

- Vitorino fernandes

---

不错的渐变替代方案。 - Harry

好的选择，我已经考虑过了，但是对于我的特定情况，盒子阴影不是一个选项。然而，这可能对其他人来说是一个很好的解决方案，所以谢谢！ - yesman

不错！但是遗憾的是相对值不能使用（例如，元素宽度上的5个视觉颜色块具有相等的宽度）。 - strarsis

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>

- Oriol

---

遗憾的是，使用等距离颜色时，绿色和红色看起来太相似了。因此应该使用自定义颜色。 - Oriol

Answer 4

Use multiple stops (although you need to define the substeps, it cannot be done automatically)

#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%);
}

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

- Gabriele Petrioli

---

抱歉，伙计，在我将我的评论转换为答案之前没有注意到你的回答。 - Harry

Answer 5

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

<div></div>

你可以看到 #2BFF00 的停止位置与 #00A3EF 在50%处相同。

- aahhaa

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>

- mkpoli