Barra de gradiente abaixo do cabeçalho?

[orangeandblack5]

Atualmente, temos o CSS configurado para nos dar uma barra abaixo do nosso cabeçalho em vez da sombra:

.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

Se quiséssemos torná-lo um gradiente, qual seria a maneira mais fácil de conseguir isso em vez disso? Podemos fazer outras coisas se tornarem gradientes, apenas não esta linha.

[Don]

Olá,

Acho que você usaria mixin para isso.

Aqui está um exemplo:

@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

Então você pode usá-lo em .d-header ou onde quiser com @include gradient-border()

.d-header {
  box-shadow: none;
  @include gradient-border();
}

[orangeandblack5]

Alguma ideia do porquê isso pode acontecer no celular?

[orangeandblack5]

Usar o seguinte apenas para dispositivos móveis funcionou:

    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;