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

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

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

对于IE 9 及更低版本，我们将不得不使用这篇 CSS Tricks 文章中filters提到的类似内容，因为它们不支持linear-gradient.

我可以使用 - 线性渐变