問題タブ [css-gradients]

ナビゲーションバーに適用した線形グラデーションを更新できないようです。cssファイルに次のように設定すると正常に動作します

しかし、同じ関数内で他の属性を設定できても、Javascriptでは機能しないようです

ここで何が間違っていますか？

これが私の期待される出力です：

これが幅の私の生成された出力です375px。

そしてここにあります767px：

ここに私のcssコードがあります:

ここで2つの問題に直面しています：

1. 点線のパターンは、すべてのサイズで正確に始まっているわけではありません (767px を参照)。
2. 現在、高さ全体に適用されている下のポイントでグラデーションを制限する方法（点線パターンの開始点で停止する必要があります）。

上の線形グラデーションがアニメーション化されると、周囲とシームレスにブレンドするのではなく、グラデーションのエッジがはっきりと見えます。

エッジを隠すために試みられた解決策は、追加のグラデーションを上に重ねることでした。

このアプローチの問題は、継ぎ目とともに元のグラデーションの多くが隠されていることです。また、継ぎ目がある場所に明るい線を作成します。

シームレスなパターンを作成するために、グラデーションが終了したときにグラデーションを反転またはミラーリングする方法はありますか? または、元のグラデーションを大きくして縮小し、シームレスなパターンの錯覚を与えることもできます。これはどのように実装できますか？