CSS3中的块状梯度效应

有没有可能让下面的渐变看起来更“块状”，这样就不必逐渐从绿色切换到红色，而是像下图那样分步骤完成

预期效果：

目前：

#渐变{
背景图像：-webkit渐变（线性、左下、右下、颜色停止（0，#00FF00）、颜色停止（0.5，#FFFF00）、颜色停止（1，#FF0000））；
背景图像：-o-线性梯度（右，#00FF00 0%，#FFFF00 50%，#FF0000 100%）；
背景图像：-莫兹线性梯度（右，#00FF00 0%，#FFFF00 50%，#FF0000 100%）；
背景图像：-webkit线性渐变（右，#00FF00 0%，#FFFF00 50%，#FF0000 100%）；
背景图像：-ms线性梯度（右，#00FF00 0%，#FFFF00 50%，#FF0000 100%）；
背景图像：线性渐变（向右，#00FF00 0%，#FFFF00 50%，#FF0000 100%）；
}

div{
高度：200px；宽度：400px；显示：块；
背景图像：线性渐变（向左，#2BF00 50%，#00A3EF 50%）；
}

---

如果要显示特定颜色，可以使用

框阴影


#渐变{
宽度：52px；
显示：块；
高度：30px；
背景：#22b14c；
盒影：#b5e61d 52px 0px 0px 0px，
#fff200 104px 0px 0px 0px，
#ffc90e 156px 0px 0px 0px 0px，
#ff7f27 208px 0px 0px 0px 0px，
#ed1c24 260px 0px 0px 0px；
}
一些使用渐变的示例：


.gradient{
宽度：450px；
高度：20px；
}
g-1{
背景色：#FFFF00；
}
g-3{
背景图像：线性梯度(
对,，
#00FF00 33%，#FFFF00 33%，
#FFFF00 66%，#FF0000 66%
);
}
g-5{
背景图像：线性梯度(
对,，
#00FF00 20%，#80FF00 20%，
#80FF00 40%，#FFFF00 40%，
#FFFF00 60%，#FF8000 60%，
#FF8000 80%，#FF0000 80%
);
}
g-9{
背景图像：线性梯度(
对,，
#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{
背景图像：线性梯度(
对,，
#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%，
#FFA0000 71%，#FF8000 71%，
#FF8000 76%，#FF6000 76%，
#FF6000 82%，#FF4000 82%，
#FF4000 88%，#FF2000 88%，
#FF2000 94%，#FF0000 94%
);
}
.g-inf{
背景图像：线性梯度(
对,，
#00FF00 0%，
#FF00 50%，
#FF0000 100%
);
}

使用多个停止（尽管需要定义子步骤，但无法自动完成）
#渐变{
背景图像：线性渐变（向右，
绿色0%，绿色14.28%，
绿黄14.28%，绿黄28.58%，
黄色28.58%，黄色42.85%，
橙色42.85%，橙色57.14%，
达克朗日57.14%，达克朗日71.42%，
红色71.42%，红色85.71%，
棕色（85.71%）；
}
这可以通过使用
线性梯度来实现。为渐变设置多种颜色可以通过指定多个颜色停止点来完成，而块状效果可以通过使下一种颜色从当前颜色结束的完全相同的位置开始（即，当前颜色的结束位置和下一种颜色的开始位置的停止百分比相同）来实现

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

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

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


div{
高度：20px；
宽度：450px；
背景：-webkit渐变（线性，0.0，100%0，颜色停止（0.2，绿色），颜色停止（0.2，黄绿色），颜色停止（0.4，黄绿色），颜色停止（0.4，黄色），颜色停止（0.6，黄色），颜色停止（0.6，橙色），颜色停止（0.8，橙色），颜色停止（0.8，红色））；
背景：-webkit线性梯度（向右，绿色20%，黄绿色20%，黄绿色40%，黄色40%，黄色60%，橙色60%，橙色80%，红色80%）；
背景：-moz线性梯度（向右，绿色20%，黄绿色20%，黄绿色40%，黄色40%，黄色60%，橙色60%，橙色80%，红色80%）；
背景：-o-线性梯度（向右，绿色20%，黄绿色20%，黄绿色40%，黄色40%，黄色60%，橙色60%，橙色80%，红色80%）；
背景：线性梯度（向右，绿色20%，黄绿色20%，黄绿色40%，黄色40%，黄色60%，橙色60%，橙色80%，红色80%）；
}
它也可以由Javascript动态生成


以下代码>var随机随机颜色=<代码>var随机随机颜色=[以下代码>码码>码>码>var随机颜色=[以下以下代码>码>码>码>码>码>码>码>码>码>码>码>码>随机随机随机颜色=，[“卡巴巴巴巴巴巴巴巴邦”、“卡巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴“，”A1E9DE“，”D220CD“，”F4FE91“，”CC6869“，”DD82D3“]
函数生成器RadientBanding（方向、颜色）{
const gradientParts=[]
颜色。forEach（（颜色，i）=>{
gradientParts.push（`${color}${（100/colors.length）*i}%`）
gradientParts.push（`color}${（100/colors.length）*（i+1）}%`）
})
返回`线性渐变（${direction}，${gradientParts.join（'，'）}）`
}
$（“#画布”）.css（{backgroundImage:generateGraientBanding（“90deg”，randomColor）}）
#画布{
身高：100%；
宽度：100%；
}


您可以提供多个颜色停止点和百分比，如。我不知道我是否明白你的问题。谢谢哈利，如果你把你的链接作为答案，我会接受的！它使用了这里所有答案中最少的代码，同时获得了我想要的效果。@Bas：我已经在这个任务中添加了css形状标签