Tailles de couleurs en dégradé

Question

J'apprends encore des parties de dégradés et je veux accomplir quelque chose qui permettrait à certaines couleurs de gradients d'avoir certaines tailles.

Exemple
Disons que j'ai un dégradé avec 3 couleurs: rouge, violet et bleu, dans cet ordre, de haut en bas. Je veux que le rouge soit autour de 10%, et le violet comme 80%, et le bleu encore comme 10%. J'ai essayé de créer ceci avec un JSFiddle, et cela ne fonctionne pas comme prévu. Avec le code que j'ai essayé d'utiliser, et le résultat est funky. En fait, le gradient est même pas un gradient plus, il est juste va d'une couleur à l'autre:

.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%); 
} 

accomplissons
Ce que je veux accomplir est d'avoir un gradient qui commence avoir, disons 10px d'une couleur, puis au fond est un autre 10px d'une couleur différente, tandis qu'entre ces deux couleurs sera une seule couleur, de sorte que la taille de l'élément n'affecte pas la longueur des gradients.

Nous vous remercions de votre aide à l'avance.

Answer 1

Solution donnée par OP:

----- ----- RESOUDRE Merci à @ Joeytje50 pour l'aide. Je n'ai jamais pensé à la façon dont les pourcentages étaient effectivement utilisés, et merci. La bonne façon sur ce que je voulais accomplir ~ 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%); 
}