渐变颜色大小

Question

我还在学习部分渐变，我想完成一些东西，可以使某些颜色的渐变是特定的大小。

假设我有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的不同颜色，而这两种颜色之间将是一个单一的颜色，所以元素的大小不会影响梯度的长度。

事先感谢您的帮助

Answer 1

OP给出的解:

----- SOLVED -----感谢@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%);
}