CSS - Как изменить высоту границы в линейном градиенте?
У меня есть следующая таблица:
и этот css для границы таблицы:
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #B3B3B3 20%) 0 0 0 1;
я хочу, чтобы граница заканчивалась там, где заканчивается последний элемент списка. Могу ли я добиться этого с помощью свойства border-image? Или это вообще возможно? Кстати, высота элементов списка может различаться, не все элементы имеют одинаковую высоту.
Итак, это должно быть результатом:
Если бы вы знали высоту, я бы сказал, что да. Если нет, вы можете использовать JavaScript для установки изображения рамки на основе высоты последнего элемента. И добавьте значение, подобное этому: 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; Где вы изменяете значение 25px, чтобы оно было изменено на любое значение элемента стиля списка снизу.
я бы принял ответ, если бы вы могли написать его как ответ на вопрос;)
кстати, вы знаете, как я могу сделать длину градиентной части постоянной? В настоящее время градиент является процентным, и если у меня есть 1000 элементов, верхняя часть границы не будет видна. На самом деле я хотел бы иметь постоянную высоту для части градиента, только 20 пикселей, т.е. на самом деле он больше не должен быть градиентом: /
Ответы 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). Вы можете попробовать посмотреть это для своего проекта или использовать JavaScript через Element.getBoundingClientRect().height (см. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) на последнем li, чтобы вычислить позицию list-item-type на основе того, как вы определяете это в своем css.
Чтобы ответить на вопрос в вашем последнем комментарии, используйте ту же логику и установите точку остановки 20px в:
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 в списке, вы увидите пробелы в вашей границе.
Есть ли способ установить или узнать высоту самого последнего элемента?