¿Barra de degradado debajo del encabezado?

[orangeandblack5]

Actualmente tenemos el CSS configurado para que nos dé una barra debajo de nuestro encabezado en lugar de la sombra:

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

Si quisiéramos convertir esto en un degradado, ¿cuál sería la forma más fácil de lograrlo? Podemos hacer que otras cosas sean degradados, pero no esta línea.

[Don]

Hola,

Creo que usarías mixin para esto.

Aquí tienes un ejemplo:

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

Luego puedes usarlo en .d-header o donde quieras con @include gradient-border()

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

[orangeandblack5]

¿Alguna idea de por qué podría suceder esto en el móvil?

[orangeandblack5]

Usar lo siguiente solo para móviles funcionó:

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