这是否可以在css中创建2轴4色渐变（双线性渐变）？

我的exmaple在JavaScript和

中

const canvas=document.querySelector（“#box”）
const ctx=canvas.getContext（'2d'）
常量插值=（值，开始，结束）=>（结束-开始）*值+开始
const interpolateRGB=（值、开始、结束）=>{
返回{
r：插值（值、开始点r、结束点r），
g：插值（值，开始.g，结束.g），
b：插值（值、开始点b、结束点b）
}
}
常量颜色=（点、左上角、右上角、左下角、右下角）=>{
const top=interpolateRGB（点x，左上角，右上角）
const bottom=interpolateRGB（点x，左下角，右下角）
const result=interpolateRGB（点y、顶部、底部）
返回结果
}
const drawCanvas=（）=>{
const imageData=ctx.createImageData（canvas.width、canvas.height）
对于（设y=0；y{
canvas.width=宽度
canvas.height=高度
画布（）；
}
调整画布大小（window.innerWidth、window.innerHeight）；
window.addEventListener（'resize'，（）=>resizeCanvas（window.innerWidth，window.innerHeight））

正文{
保证金：0；
填充：0；
溢出：隐藏；
}
#盒子{
边框：1px纯黑；
}

您可以尝试

使用snippet/的示例：

html{
高度：100vh；
背景：
径向梯度（左上角的椭圆，rgb（236，249，87）15%，透明60%），
径向梯度（左下角的椭圆，rgb（247，69，204）15%，透明60%），
径向梯度（右上角的椭圆，rgb（121238196）15%，透明60%），
径向梯度（右下角的椭圆，rgb（81,82,213）15%，透明60%）
}

遮罩

结合

线性梯度

可以做到：

.box{
高度：200px；
宽度：300px；
背景：线性渐变（向右，rgb（23825283），rgb（120239197））
}
.box：：之前{
内容：“；
显示：块；
身高：100%；
背景：线性梯度（向右，rgb（253,67205），rgb（74,68215））；
-webkit遮罩：线性渐变（至底部，透明，#fff）；
遮罩：线性渐变（至底部，透明，#fff）；
}