如何在边框图像切片中捕获两个底角？

Question

我正在尝试使用边框图像 CSS 将渐变作为底部边框添加到我的网站标题。渐变需要填充 100% 的宽度。

我可以使用border-image-width和border-image-slice让渐变填充底部边框的大部分，但由于某种原因，它将两个底部角排除为空白。如何让渐变在一个流中跨越所有底部？

我已经尝试完全删除border-image-slice，它填充了两个底角，但省略了底部边框的其余部分。

{
    border-image-width: 0 0 10px 0 auto;
    -moz-border-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 0 0 1 0;
}

似乎将border-image-width和border-image-slice都设置为“0 0 X 0”应该只显示底部。目前很好。然而，这也移除了两个底角，因此有几个像素的空白区域阻止了渐变从站点的一个边缘流到另一个边缘。奇怪的是，当我完全移除底部图像切片时，只有两个底角显示渐变。我需要渐变从左下角开始，一直穿过底部到右下角。

Answer 1

考虑一个覆盖透明边框的背景，这样会更容易处理：

.box {
  height: 50px;
  border-bottom:10px solid transparent;
  background:
   linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) bottom/100% 10px border-box no-repeat,
   red;
}

<div class="box"></div>

切片的问题是，例如，如果您想要底部/左角，您还需要底部和左侧边缘，而不仅仅是底部边缘。

相关为了更好地理解border-image-slice背后的逻辑：border-image-slice for gradient border image