CSSで丸いボックスを作成する

次に、固定幅と非固定幅の 2 つの DIV に含まれる 2 つのコンテンツ領域を含む xHTML ページを作成します。これらの 2 つの DIV の角が丸いページを作成します。 。

私たちが使用する理論は、要素に背景を追加するときに、背景画像が常に背景色の上に表示されるというものです。単色の角丸長方形を作成するには、まず通常の長方形を作成してから、角の丸い画像を使用します。この要素の 4 つの角の丸い背景と同じ色で角の丸いフレームを形成します。この方法については、固定サイズ ボックスとストリーミング非固定サイズ ボックスの 2 つのケースに分けて以下で詳しく説明します。

固定サイズのボックスに丸い角を追加する ステップ 1: 基本的な xHTML ドキュメントを作成し、そこに少しのコンテンツを追加する
プレーンコピーをクリップボードプリントに表示しますか?

view plaincopy to Clipboardprint?
本文、html {
マージン:0;
パディング:0;
背景:#a7a09a;
色:#000;
}

本文、html {
マージン:0;
パディング:0;
背景:#a7a09a;
色:#000;
}ステップ 2: DIV の幅と背景色を設定する
プレーンコピーをクリップボードプリントに表示しますか?
div#fixedBox {
幅:340ピクセル;
マージン:40ピクセル;
背景:#E4ECF9;
}

div#fixedBox {
幅:340ピクセル;
マージン:40ピクセル;
背景:#E4ECF9;
}ステップ 3: DIV の幅に基づいて角丸長方形を作成します。DIV の幅を 340 ピクセルに設定したので、長方形を作成した後、幅 340 ピクセルの角丸長方形を作成する必要があります。長方形全体の下部を切り取ってDIV画像として使用し、次の2つの画像を作成しました。

ステップ 4: 画像を DIV 背景に適用する
プレーンコピーをクリップボードプリントに表示しますか?
div#fixedBox {
幅:340ピクセル;
マージン:40ピクセル;
背景:#E4ECF9 url(images/bottom.gif) 繰り返しなしの下部中央。
}

div#fixedBox {
幅:340ピクセル;
マージン:40ピクセル;
背景:#E4ECF9 url(images/bottom.gif) 繰り返しなしの下部中央。
}div#fixedBox h2{
マージン:0;
パディング:2px;
背景:#E4ECF9 url(images/top.gif) 繰り返しなしの上中央。

、

DIV の下部に Bottom.gif という名前の画像を適用し、次に DIV の最初の要素 H2 で Top.gif を使用しています。 もちろん、ここで最初に注意する必要があるのは、追加できないことです。 h2 にマージンを設定するか、DIV にパディングまたはボーダーを追加します。

非固定幅の丸いボックスを作成する 上で述べたのは、固定幅ではあるが固定高さの丸いボックスを作成することです。つまり、幅と高さを固定しないとします。少し考えてみましょう。今回は、任意の方法で縮小できる角丸長方形を作成するために、各隅に 1 枚ずつ、合計 4 枚の画像を使用する必要があることがわかります。まず最初に DIV コンテナを作成する必要があります。基本的な内容を追加します。

ステップ 1: xHTML ドキュメントを作成する
プレーンコピーをクリップボードプリントに表示しますか?

2番目のステップは、角丸を作成することです。角丸は、左上、左下、右上、右下の方向にあります。完成した角丸は次のとおりです。

ステップ 3: DIVview plaincopy の背景色を

クリップボードプリントに設定しますか?
div#flowBox {
マージン:40ピクセル;
背景:#C3D9FF;
}

div#flowBox {
マージン:40ピクセル;
背景:#C3D9FF;
ステップ 5: 丸い角を追加します

。幅と高さが固定されていない DIV コンテナの場合は、DIV の幅と高さの変化に応じて丸い角の位置を変更できる必要があるため、固定コンテナに丸い角を追加することしかできません。 -width DIV。ここで使用される固定幅の画像は 2 つの小さな画像に処理され、H2 要素を追加した後、丸い角の片側だけが得られます。 H2 で使用できる 1 つの丸い角が得られるため、2 つの丸い角が解決され、p 要素は 1 つの丸い角を提供でき、div 自体には 1 つの丸い角があり、これは正確に 4 つの丸い角になります。

プレーンコピーをクリップボードプリントに表示しますか?
div#flowBox {
マージン:40ピクセル;
背景:#C3D9FF url(images/bottom-left.gif) 左下非繰り返し。
}

div#flowBox h2{
マージン:0;
パディング:0;
背景:#C3D9FF url(images/top-left.gif) 左上を繰り返しません。
}

div#flowBox h2 スパン{
マージン:0;
表示:ブロック;
背景:#C3D9FF url(images/top-right.gif) 右上; 繰り返しなし。
}

div#flowBox p{
マージン:0;
パディング:0;
背景:#C3D9FF url(images/bottom-right.gif) 繰り返しなし、右下。
}