CSS3中的块状渐变效果

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

期望的效果：

目前：

#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,#FF0000 100%);
  background-image: -webkit-linear-gradient(right,#FF0000 100%);
  background-image: -ms-linear-gradient(right,#FF0000 100%);
  background-image: linear-gradient(to right,#FF0000 100%);
}

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

最佳答案

这可以使用线性梯度来实现.通过分配多个色标来设置多个颜色到渐变可以通过使下一个颜色从当前颜色结束的完全相同的位置开始(即,当前颜色的结束位置的相同停止百分比)来实现块效果和下一个颜色的开始位置).

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

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),yellowgreen),color-stop(0.4,yellow),color-stop(0.6,orange),color-stop(0.8,red));
  background: -webkit-linear-gradient(to right,red 80%);
  background: -moz-linear-gradient(to right,red 80%);
  background: -o-linear-gradient(to right,red 80%);
  background: linear-gradient(to right,red 80%);
}

对于IE 9及更低版本,我们必须使用this CSS Tricks article中提到的过滤器,因为它们不支持线性渐变.

Can I Use – Linear Gradients