CSS-linear-gradient-如何使边界的渐变部分恒定而不是百分比？

Question

我有下表：

，此CSS用于表格边框：

border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px)) 0 0 0 1;

当前边界的渐变部分是百分比的。因此，当我的列表中有1000个项目时，将不会看到前20个项目的边框。如何使渐变部分的长度恒定？因此，无论列表项数如何，边框的开头似乎总是一样？

Answer 1

考虑到您以前关于同一问题（CSS - How to change border height in linear-gradient? / How to make a border left with custom bullet for my list, in a gradient style?）的所有问题，我建议采用另一种方法来解决此布局并避免出现不同的问题：

ul {
   background:
      /*top part always the same height (60px)*/
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 100%) 22.5px 0/3px 60px,
      /*bottom part*/
      linear-gradient(#b3b3b3,#b3b3b3) 22.5px 60px/3px calc(100% - 70px);
   background-repeat:no-repeat;
   overflow:hidden;
   margin:5px 0;
}

li {
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 5px;
  list-style: none;
  position: relative;
}

li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: grey;
}
/*hide the non needed part of the gradient*/
li:last-child::after {
  content: "";
  position: absolute;
  left: -20px;
  top: 23px;
  width: 8px;
  height: 100vh;
  background: #ededed;
 
}

body {
  background: #ededed;
}

<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text<br>125 886</li>
</ul>

<ul>
  <li>Some text</li>
  <li>Some text</li>
</ul>
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
</ul>