В настоящее время у нас настроен CSS, чтобы вместо тени отображать линию под заголовком:
.d-header {
box-shadow: none;
border-bottom: solid var(--my_header_box_color)
}
Если мы хотим сделать эту линию градиентом, какой самый простой способ этого добиться? Мы можем сделать градиенты для других элементов, но не для этой линии.
Здравствуйте,
Я бы использовал mixin для этого.
Вот пример:
@mixin gradient-border() {
border-image: linear-gradient(to right, orange, black);
border-bottom: 5px solid;
border-image-slice: 1;
}
Затем вы можете применить его к .d-header или в любом другом месте, используя @include gradient-border()
.d-header {
box-shadow: none;
@include gradient-border();
}
Использование следующего только для мобильных устройств сработало:
border-left: 0px solid;
border-right: 0px solid;
border-top: 0px solid;