HTML/CSS で色で塗りつぶされたボックスを作成するにはどうすればよいですか?

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

HTML と CSS は、あらゆる形状やフレームを作成できるテクノロジーです。色で塗りつぶされたボックスを作成するには、HTML を使用して簡単なボックス フレームを作成し、CSS プロパティを使用して色で塗りつぶすことができます。また、HTML の「svg」(スカラー ベクター グラフィックス) 属性を使用してボックスを描画し、fill color 属性を使用してボックスを色で塗りつぶすこともできます。 ＃＃＃文法＃＃＃

svg を使用してボックスを作成し、色で塗りつぶすための構文は次のとおりです。これには、x、y、幅、高さ、パディングの 4 つの属性が含まれます。したがって、x 軸は画面に対するボックスの水平位置を設定し、y 軸は垂直位置を設定し、高さはボックスの高さを設定し、幅はボックスの幅を設定し、fill プロパティは設定します。ボックス内のボックスの色。

リーリー

アルゴリズム 1

テキスト エディターで、HTML ボイラープレートを含む HTML ファイルを作成します。

次に、HTML 本文に svg タグを追加します。

• リーリー

ここで、
• セマンティック マークアップを使用して svg タグ内にボックスを作成します。

リーリー

• 次に、

  タグに x、y、幅、高さ、パディングなどのプロパティを設定します。

リーリー

• 次にブラウザを開くと、色で塗りつぶされたボックスが表示されます。

例 1

この例では、HTML svg タグを使用して、
• 属性を利用してボックスを描画します。

  リーリー

  アルゴリズム 2

テキストエディタでindex.htmlファイルを作成し、そのファイルにHTMLボイラープレートを追加します。

次に、HTML 本体に div コンテナを追加します。

リーリー

• 次に、内部スタイル タグを HTML head タグに追加します。

• リーリー

次に、CSS スタイル プロパティを使用して、ボックスの高さ、幅、色を設定します。

• リーリー

ブラウザを開くと、ボックスが正常に作成され、色で塗りつぶされます。

• 例 2

この例では、HTML div コンテナーを含むボックスを作成し、CSS スタイル プロパティを使用してボックスを色で塗りつぶします。

リーリー ＃＃＃結論は＃＃＃

SVG (スカラー ベクター グラフィックス) を使用してボックスを作成するのと同じように、SVG を使用してさまざまな形状を作成することもできます。色で塗りつぶされたボックスを作成する最良の方法は、いくつかの CSS スタイル プロパティを持つ単純な div コンテナーを使用することです。CSS を使用すると、別のスタイルシートでボックスを簡単にカスタマイズできるためです。小規模なプロジェクトでは、svg の操作は難しくないように思えるかもしれませんが、同じボックスを複数回ビルドする必要がある場合、同じコードを複数回記述するのは気の遠くなる作業です。ボックスの位置を変更したくない場合は、「
• 」とともに「x」および「y」属性を使用する必要はありません。これらのタイプのボックスは、アニメーションをロードするために使用したり、情報を表示するためのカードとして使用したりできます

以上がHTML/CSS で色で塗りつぶされたボックスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。