Farbverlauf-Leiste unter der Kopfzeile?

[orangeandblack5]

Wir haben derzeit das CSS so eingerichtet, dass es uns einen Balken unterhalb unseres Headers anstelle des Schattens gibt:

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

Wenn wir daraus einen Farbverlauf machen wollten, wie wäre der einfachste Weg, das zu erreichen? Wir können andere Dinge zu Farbverläufen machen, aber nicht diese Linie.

[Don]

Hallo,

Ich denke, ich würde dafür mixin verwenden.

Hier ist ein Beispiel:

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

Dann können Sie es auf .d-header oder wo immer Sie möchten mit @include gradient-border() verwenden.

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

[orangeandblack5]

Gibt es eine Idee, warum das auf Mobilgeräten passieren könnte?

[orangeandblack5]

Die Verwendung des Folgenden nur für Mobilgeräte funktionierte:

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