Если вы сможете узнать высоту либо 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Вы можете попытаться взглянуть на это для своего проекта или использовать JavaScript с помощью Element.getBoundingClientRect().height (см. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) на последнем li, чтобы рассчитать положение list-item-type на основе того, как вы определяете это в своемcss.
Чтобы ответить на вопрос в своем последнем комментарии, используйте ту же логику и установите точку остановки 20px in:
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, который мог бы сделатьКе гораздо проще справиться без JavaScript.Тогда вам нужно будет только указать значения linear-gradient для ul>li:first-child и ul>li:last-child, используя приведенные выше принципы.Просто помните, что если вы используете margin-top или margin-bottom в любом li в списке, вы увидите пробелы на своей границе.