css - 如何捕获 border-image-slice 中的两个底 Angular ？

Question

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

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

我试过完全删除 border-image-slice 并且填充了两个底 Angular 但忽略了底部边框的其余部分。

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

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>

切片的问题在于，如果您想要例如底 Angular/左 Angular ，您还需要底边和左边，而不仅仅是底边。

与更好地理解border-image-slice背后的逻辑相关:border-image-slice for gradient border image