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给出的解决方案：

-----已解决----- 感谢@ 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%);
}

渐变色尺寸

1 个答案: