HTMLで色のグラデーションを設定する方法

藏色散人
リリース: 2023-01-05 16:09:43
オリジナル
41165 人が閲覧しました

htmlカラー グラデーションの設定方法: 最初に HTML サンプル ファイルを作成し、次に div タグを使用してモジュールを作成し、次に css タグの "id(colorchange)" を通じて div スタイルを設定し、最後にリニアを使用します。 gradient 属性を使用して div の背景色のグラデーション効果を設定するだけです。

HTMLで色のグラデーションを設定する方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

CSS で色のグラデーションを実現する方法を説明するため、test.html という名前の新しい HTML ファイルを作成します。

HTMLで色のグラデーションを設定する方法

test.html ファイルで、div タグを使用して、グラデーション カラーを設定するモジュールを作成します。

HTMLで色のグラデーションを設定する方法

test.html ファイルで、div タグの id 属性を colorchange に設定し、主にこの ID を使用して CSS スタイルを設定します。部門

HTMLで色のグラデーションを設定する方法

test.html ファイルに、 タグを記述します。 page このタグ内にCSSスタイルを記述します。

[推奨学習:

HTML ビデオ チュートリアル ]

HTMLで色のグラデーションを設定する方法

css タグで、id (colorchange) を使用して div のスタイルを設定します。 ) 、div の幅を 300px に、高さを 200px に設定します。

HTMLで色のグラデーションを設定する方法

css タグで、background-image 属性の Linear-gradient を使用して div の背景色を左から右 (右へ) に設定します。 )、赤から黄色へのグラデーション。

HTMLで色のグラデーションを設定する方法

test.html ファイルをブラウザで開き、効果を確認します。

HTMLで色のグラデーションを設定する方法

以上がHTMLで色のグラデーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!