如何捕捉边框图像切片中的两个底角？

Question

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

我可以使用边框图像宽度和边框图像切片来获得填充大部分下边框的渐变，但由于某种原因，它将两个底角排除为空白。如何才能使梯度在一个流中跨越所有底部？

我试着完全删除边框图像切片，填充了两个底角，但省略了底边框的其余部分。

{
    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;
}

似乎同时将边框图像宽度和边框图像切片设置为"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