使用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>