我正在尝试使用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”应该只显示底部。目前很好。但是，这也会删除两个底角，因此存在几个空白像素，阻止渐变从该位置的一个边缘流到另一边缘。奇怪的是，当我完全删除底部图像切片时，只有两个底角出现了渐变。我需要渐变从左下角开始，一直到右下角一直穿过底部。
考虑一个覆盖透明边框的背景，并且更容易处理：
.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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句