如何捕捉 border-image-slice 中的两个底角？

Question

我正在尝试使用 border-image CSS 添加渐变作为我网站 header 的底部边框。渐变需要填满宽度的 100%。

我可以使用 border-image-width 和 border-image-slice 获得渐变来填充底部边框的大部分，但出于某种原因，它将两个底角排除为白色 space。我怎样才能让渐变在一个流中跨越所有底部？

我试过完全删除 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”应该只会显示底部。目前很好。但是，这也删除了两个底角，因此有几个白色像素 space 阻止渐变从站点的一个边缘流到另一个边缘。奇怪的是，当我完全删除 bottom-image-slice 时，只有两个底角显示渐变。我需要渐变从左下角开始，一直穿过底部到右下角。

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>

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

相关，更好理解border-image-slice背后的逻辑：

如何捕捉 border-image-slice 中的两个底角？

How to capture two bottom corners in border-image-slice?

css

border-image