Html 是否可以在CSS背景中使用未编排的开始和结束位置设置渐变？

在SVG渐变中，可以设置开始x y和结束x y位置。在CSS线性渐变中，但使用未编排、独立的开始和结束位置（下图所示）是否可以做到这一点

这是我的CSS线性渐变：

#矩形{
宽度：100%；
高度：200px；
位置：绝对位置；
排名：0；
左：0；
背景：线性梯度（225deg，rgba（255255255,1）0%，rgba（250,0,0,1）27.59%，rgba（108,22,95,1）76.35%，rgba（39,32,32,1）100%）
}

<代码> > p>您可以考虑使用<代码> Calc（）<代码> >您将结合像素和百分比值。百分比值将定义参考，像素将定义渐变长度，您将长度乘以每种颜色的百分比：


.rectangle{
宽度：200px；
高度：100px；
显示：内联块；
边框：1px实心；
背景：线性梯度（225度，
rgba（255255255,1）计算值（50%-70px*（1-0）），
rgba（250,0,0,1）计算值（50%-70px*（1-0.2759）），
rgba（108,22,95,1）钙（50%-70px*（1-0.7635）），
rgba（39,32,32,1）钙（50%-70px*（1-1）））
}

所以基本上你希望在起点和终点之间保持相同的视觉距离？是的，没错，这很好。如何获得50%和70像素？您如何知道使用终点或起点作为锚定百分比？第一个使用端点的示例看起来最精确。@1.21gigawatts我根据您的图形找到了它们。端点几乎位于正方形的中间，即梯度线的50%。70px是一个随机值，用于说明渐变的长度（基本上是白线的长度）。然后，如果你进行计算，你会看到在第一个例子中，我有一个从
50%-70px
到
50%
的梯度，这使得最后一种颜色在50%（终点）处，而在第二个例子中，它是从
50%
到
50%+70px
，所以第一种颜色是50%