CSS - линейный градиент - Как сделать градиент частью границы постоянной, а не процентной?

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 - Как изменить высоту границы в линейном градиенте? / Как сделать границу, оставленную с помощью пользовательского маркера, для моего списка встиль градиента? ) Я бы порекомендовал еще один способ решения этой задачи и избежать различных проблем:

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>