2

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

4

1 回答 1

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

于 2019-07-21T00:08:38.993 回答