css - CSS3 グラデーション使用時の「不明なプロパティ値」エラー

okwaves2024-01-25 8

以下に示すように、長方形の div に線形グラデーションを使用しています。

.rectangle {
  width:            300px;
  height:           200px;
  background-image: linear-gradient(to-right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>

ただし、背景はレンダリングされません。 Chrome 開発ツールでは「不明なプロパティ値」と表示されます。構文に何か問題があるのではないかと考えていますが、問題は見つかりませんでした。

------------------------

linear-gradient の最初の引数「to-right」のハイフンを削除する必要があります。

以下のコードを参照してください。

.rectangle {
  width:            300px;
  height:           200px;
  background-image: linear-gradient(to right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>

ありがとう。それが些細なことだと分かっていました。

– ワイス・カマル

2020 年 9 月 3 日 21:11

------------------------

あらゆる種類の方向が得られるため、グラデーションの方向には常に deg または rad を使用してください。という単語を使用して書きたい場合は、「右へ」の間にハイフンは入れません。右になります。度数を使用している場合は、(0deg,#111,#333,#444) を試すことができます。

.rectangle {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(to right, #009A80 0%, #333 0%, #333 100%);
}

<div class="rectangle"></div>

2020 年 9 月 3 日、午後 3 時 40 分に回答

サンドリンジョイ

1.137

11 個

銀バッジ 11 個

銅バッジ 29 個