HTML css线性渐变未按预期工作

我只是在css中使用线性渐变，顺便说一句，生成的渐变效果与设计不同。我从未在任何Android、iOS、React Native或HTML5画布上遇到过这个问题，但只在css上遇到过

.gradient {
  background-image: linear-gradient(to right top, red, blue);
}

我做了一把小提琴来展示css的

线性渐变

和canvas的create

createLinearGradient

之间的差异。 请检查这个

上面是css渐变，下面是画布渐变。 正如您所看到的，画布的

createLinearGradient

工作正常，但在css上

相同的颜色线（上图中的黄线）与渐变方向不垂直，而是看起来像元素的另一条
对角线。
有什么原因可以解释为什么它在css中吗？
只需将
替换到右上方
到
到右上方
。如果将其设置为
至右上
，则会应用一定程度，因为它以左下角为起点，并延伸至矩形的右上角


var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
var grd=ctx.createLinearGradient（0,75,300,0）；
grd.ADDCORSTOP（0，“红色”）；
grd.addColorStop（1，“蓝色”）；
ctx.fillStyle=grd；
ctx.fillRect（0,0,300,75）
.parent{
宽度：300px；
高度：300px；
对齐项目：居中；
证明内容：中心；
显示器：flex；
弯曲方向：立柱；
背景色：#6EE2F5；
}
.孩子{
宽度：300px；
高度：75px；
边框：1px纯红；
背景图像：线性渐变（向右、红色、蓝色）；
}
#帆布{
宽度：300px；
高度：75px；
边框：1px纯绿色；
}
这是设计的。您可以在此处阅读更多信息：

如果参数改为指定框的一个角，如左上角的
，渐变线的角度必须使其指向与指定角相同的象限，并且垂直于与渐变框的两个相邻角相交的线。这将导致50%的颜色停止与两个相邻的角相交

基本上，当使用这样的关键字时，你会有一种从拐角处延伸的渐变，你会失去对角线的垂直特征


.child{
位置：相对位置；
宽度：100px；
高度：100px；
边框：1px纯红；
背景图像：线性渐变（右上角，红色50%，蓝色0）；
}
.child.alt{
宽度：200px；
}
.孩子：以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：线性渐变（左上角，透明钙（50%-5px），绿色，透明钙（50%+5px））；
}
这个很好，因为它是正方形
但不是这个
谢谢您的回答，但是我的要求（右上角）有没有精确的解决方案？我确实需要这个。但是为什么你需要使用这个关键字，同时需要一个替代的结果呢？你在玩什么黑客游戏吗？：）我将其用作react项目的一个组件，因此元素的大小不是固定的，将动态更改，并且渐变应该适用于任何矩形。因为它以左下角为起点，并延伸到矩形的右上角。-->这不是真的，如果是这种情况，那么OP应该有正确的result@TemaniAfif那你能更新答案吗？我不得不将此作为参考：如果MDN是错误的，或者我是错误的，请通过编辑更正我们两人。这很好地解释了问题：。它是这样显示的，因为您添加了“top”value@Sorix，真的很感谢，你的链接是如此有助于了解线性梯度，顺便说一句，我必须使梯度为任何动态矩形元素的右上方向。在css中有什么解决方案吗？也许用一个角度来代替顶部或底部。如果我理解正确的话，你的梯度应该始终处于相同的角度。。。像这样：线性梯度（45度，红色，蓝色）；用互动演示更新了我的答案