如何使用CSS渐变使颜色同时向右和向底流动？

问题描述

我正在尝试使三叠div的背景色在水平和垂直方向上相互融合。我设法使用线性渐变使其适用于水平框，但是正如您在下面看到的，垂直行之间有明显的分隔线。有没有办法使盒子也过渡到下面的盒子？我在此上使用纯CSS，也许还有另一种（更好的）方法？

CSS：

#canvas {
 width: 100%;
 display: block;
 clear: both;
 margin: 0 0 1em;
}

.row {
 width: 100%;
}

.cell {
 width: 10%;
 height: 5em;
 float: left;
}

.clear {
 clear: both;
}

#box_0x0 {
 background: linear-gradient(to right,rgb(223,207,40),rgb(208,115,69));
}
#box_0x1 {
 background: linear-gradient(to right,69),rgb(105,166,166));
}

#box_1x0 {
 background: linear-gradient(to right,rgb(75,204,178),rgb(245,255,71));
}
#box_1x1 {
 background: linear-gradient(to right,71),rgb(67,102,113));
}

#box_2x0 {
 background: linear-gradient(to right,rgb(185,28,75),rgb(204,114,21));
}
#box_2x1 {
 background: linear-gradient(to right,21),rgb(238,156,125));
}

和HTML：

<div id="canvas">
  <div class="row">
    <div class="cell box_0x0" id="box_0x0"></div>
    <div class="cell box_0x1" id="box_0x1"></div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="cell box_1x0" id="box_1x0"></div>
    <div class="cell box_1x1" id="box_1x1"></div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="cell box_2x0" id="box_2x0"></div>
    <div class="cell box_2x1" id="box_2x1"></div>
    <div class="clear"></div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）