Css 调整图元大小时保持渐变大小

当调整元素或元素容器的大小时，如何创建保持其当前大小的渐变

100%宽度的框： 宽度减少到60%时想要的结果（注意颜色上的分割应与原始100%对齐）： 宽度减小到60%时的当前结果：

我还需要

线性渐变

没有绝对值（），因为我将在动态宽度元素中使用它

@关键帧调整大小{
50% {
宽度：50%
}
100% {
宽度：100%
}
}
.盒子{
高度：100px；
宽度：100%；
背景图像：线性梯度（90度，红色50%，蓝色50%）；
动画：调整线性大小；
}

---

定义渐变的固定大小：

@关键帧调整大小{
50% {
宽度：50%
}
100% {
宽度：100%
}
}
.盒子{
高度：100px；
宽度：100%；
背景图像：线性梯度（90度，红色50%，蓝色50%）；
背景尺寸：100vw 100%；/*已添加*/
动画：调整线性大小；
}