Farbverlauf-Leiste unter der Kopfzeile?

Unterstützung
1

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.

2

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();
}

Screenshot 2021-11-17 at 10.20.05
Screenshot 2021-11-17 at 10.20.051438×219 19 KB

3

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

image
image1125×439 102 KB

4

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

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