使用CSS线性渐变（不光滑颜色）

Question

假设我的线性CSS渐变生成纯色看起来是这样的：

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

它会生成一个CSS梯度，看起来像这样：

如何制作相同的渐变，但是没有颜色之间的过渡时使用纯色？ （使用CSS）

感谢

Answer 1

像这样

.gradient { 
 
    width: 500px; 
 
    height: 200px; 
 
    background: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, purple 60%, purple 80%, yellow 80%,yellow 100%); 
 
}

<div class="gradient"></div>

Answer 2

在梯度，你在％停止颜色，开始从完全一样的点下一种颜色。如果您希望像其他@ fen1x的答案那样使用效果器，请应用此功能。请记住，只能创建盒状效果，如果在我的答案中创建类似渐变的东西，则边缘可能看起来像素化。

div { 
 
    width: 500px; 
 
    height: 300px; 
 
    background: linear-gradient(280deg, #D4FF00 0%, #D4FF00 50%, #800000 50%, #000000 100%); 
 
}

<div></div>