ヘッダーの下にグラデーションバー？

[orangeandblack5]

ヘッダーの下に影ではなくバーが表示されるように、現在CSSを設定しています。

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

これをグラデーションにするには、代わりにどのようにするのが最も簡単な方法でしょうか？他のものはグラデーションにできますが、この線だけはできません。

[Don]

こんにちは。

これには 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();
}

[orangeandblack5]

それがモバイルで発生する原因について何か考えはありますか？

[orangeandblack5]

モバイルでのみ以下が機能しました。

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