グラデーションカラーサイズ - html、css、gradient

私はまだグラデーションの一部を学んでいます。グラデーションの特定の色を特定のサイズにすることができるようなものを達成したいのです。

例
3色のグラデーションがあるとしましょう： 赤、紫、青の順に上から下に向かって順に並んでいます。赤は10％、紫は80％、青は10％です。私はこれを作成しようとしました。 JSFiddleそれは私がそれをどのように計画したかは分かりません。 私が使用しようとしたコードと一緒に、結果はファンキーです。実際、勾配はもはや勾配ではなく、ただ一つの色から別の色へと変化します。

.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 10%, purple 80%, blue 10%);
background: -o-linear-gradient(red 10%, purple 80%, blue 10%);
background: -webkit-linear-gradient(red 10%, purple 80%, blue 10%);
background: linear-gradient(red 10%, purple 80%, blue 10%);
}

達成する
私が達成したいのは、グラデーションを持つことです例えば10pxの色から始まり、次に、別の色の別の10pxですが、その2つの色の間には単一の色になるので、要素のサイズは要素の長さに影響しませんグラジエント。

あなたのお手伝いをありがとうございます。

回答：

OPの解答：

-----ソルヴェード----- 助けを借りて@ Joeytje50に感謝します。私はパーセンテージが実際にどのように使われているか考えなかったし、ありがとう。達成しようとしていたものの正しい方法〜 JSFiddle

.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -o-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -webkit-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
}