CSS-如何更改线性渐变的边框高度？

Question

我有下表：

，此CSS用于表格边框：

border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #B3B3B3 20%) 0 0 0 1;

我希望边框在最后一个列表项的结尾处结束。我可以使用border-image属性实现此目的吗？还是有可能吗？顺便说一下，列表项的高度可能会有所不同，并非每个项目的高度都完全相同。

这应该是结果：

Answer 1

如果您将能够知道ul或至少最后一个li的高度，那么绝对有可能只有css解决方案；否则，它将变得棘手。

linear-gradient函数采用四个值（请参见https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values），其中之一是color-stop-list。如果将一个停靠点设置为终点，而将另一个停靠点设置为同一点（百分比或长度，例如像素），则在该停靠点处将获得一条实线，具有定义的角度或默认角度。

因此，您可以使渐变停止在固定像素点处，如下所示：

linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))

在这里，我正在从主色更改为在框的整个高度opacity: 0处25px处使用to bottom的颜色（因为我们正在使用Element.getBoundingClientRect().height）。您可以尝试为您的项目着眼，或者在最后一个li上通过list-item-type使用JavaScript（请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect），根据您的方式计算20px的位置在您的CSS中定义它。

要回答您上一次评论中的问题，请使用相同的逻辑并在以下位置设置停止点linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #b3b3b3 20px, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px)) ：

li

话虽如此，您可以考虑处理每个ul而不是linear-gradient上的边框，这将使使用JavaScript更加容易。然后，您只需使用上述原理，即可在ul>li:first-child和ul>li:last-child上提供margin-top值。请记住，如果您在列表中的任何margin-bottom上使用li或#include "Pods/Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"，您将在边框中看到空白。