ホームページ > 記事 > ウェブフロントエンド > 上下グラデーションCSSの書き方
CSS では、背景属性と Linear-gradint() 関数を使用して、上下のグラデーションの効果を実現できます。構文は、「background:linear-gradient(下へ、上の色、下の色)」です。 );"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
上下のグラデーション CSS の書き方
1. 実装方法を説明するために、test.html という名前の新しい HTML ファイルを作成します。 CSSで上から下までグラデーションカラーで表現します。テスト用に div タグを使用してモジュールを作成します。 div タグに class 属性を追加し、mytest に設定します。
css タグで、クラスを通じて div のスタイルを定義し、幅を 400 ピクセル、高さを 200 ピクセルに設定します。
#2. CSS タグで、background 属性を使用し、linear-gradient を使用し、tobottom を使用して、上から赤から黄色へのグラデーションを実現します。一番下まで。
linear-gradient() 関数は、2 つ以上の色の線形グラデーションを表す画像を作成するために使用されます。
線形グラデーションを作成するには、2 つの色を指定する必要があります。さまざまな方向 (角度として指定) でグラデーション効果を実現することもできます。方向が指定されていない場合、グラデーションはデフォルトで上から下に設定されます。
構文は次のとおりです:
linear-gradient(direction, color-stop1, color-stop2, ...);
注意してください;
direction は、角度値を使用してグラデーションの方向 (または角度) を指定することを意味します。 color-stop1、color-stop2、... は、グラデーションの開始色と終了色を指定するために使用されます。
ブラウザで test.html ファイルを開いて効果を確認します。
概要:
1. div タグを使用して、テスト用のモジュールを作成します。
2. div タグに class 属性を追加し、mytest に設定します。
3. css タグで、クラスを通じて div のスタイルを定義し、幅を 400px、高さを 200px に設定します。
4. CSS タグで、background 属性、linear-gradient、および tobottom を使用して、上から下に赤から黄色へのグラデーションを実現します。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !
以上が上下グラデーションCSSの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。