HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックスモデルがデフォルトで正方形であることに気付きました。ボックスを希望のモデルに変換するにはどうすればよいでしょうか? まずはデフォルトの状況を見てみましょう----

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="ビューポート" content="幅=, 初期スケール=1.0">
    <スタイル>
        。箱{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: rgb(116, 51, 51);
            ボックスシャドウ:0 10px 10px 赤;
            テキスト配置: 中央;
            位置:絶対;
            マージン:0 自動;   
            左:0;
            右:0;
            下:0;
            トップ:0;

        }
    </スタイル>
    <title>ドキュメント</title>
</head>
<本文>
    <div class="box">

    </div>
</本文>
</html>

ここに画像の説明を挿入

デフォルト設定は正方形ですが、見た目が良くないかもしれません。 1ラウンドに挑戦してみましょう！

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <スタイル>
        。箱{
            幅: 100ピクセル;
            高さ: 100px;
            境界線の半径: 50%;
            背景色: rgb(28, 99, 60);
            境界線: 5px実線rgb(55, 0, 255);
            位置: 絶対;
            マージン: 0 自動;
            左: 0;
            右: 0;
            下部: 0;
            上: 0;
        }
    </スタイル>
    <title>ラウンド</title>
</head>
<本文>
    <div class="box">

    </div>
</本文>
</html>

ここに画像の説明を挿入

私たちがどれだけ丸いか見てください！半円形のものを見てみましょう！

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <スタイル>
        。箱{
            幅: 100ピクセル;
            高さ: 50px;
            背景色: rgb(175, 42, 216);
            境界線: 3px実線rgb(26, 236, 26);
            右上の境界線の半径: 50px;
            左上の境界線の半径: 50px;
            位置:絶対;
            マージン: 0 自動;
            左: 0;
            右: 0;
            下部: 0;
            上: 0;
        }
    </スタイル>
    <title>半円</title>
</head>
<本文>
    <div class="box">

    </div>
</本文>
</html>

ここに画像の説明を挿入

他の形にも挑戦してみましょう！

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <スタイル>
        。箱{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: rgb(82, 84, 223);
            境界線の半径: 20px 15px 20px 10px;
            位置: 絶対;
            マージン: 0 自動;
            左: 0;
            下部: 0;
            右: 0;
            上: 0;
        }
    </スタイル>
    <title>デモ</title>
</head>
<本文>
    <div class="box">

    </div>
</本文>
</html>

ここに画像の説明を挿入

知識ポイント分析:

border-radius: 要素に丸い境界線を設定すると、円、半円、楕円、四分の一円など、さまざまな丸い形状を作成できます。
左上、右上、右下、左下の 4 つの値を設定できます。覚え方は、「左上から始めて時計回りに移動します。」です。。。

この記事で border-radius プロパティの使い方が理解できたと思います。

これで、HTML+CSS ボックスモデルケース (円、半円など) の「border-radius」の簡単な紹介の記事は終了です。より関連性の高い HTML+CSS ボックスモデルコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

>>: HTMLはフォームを通じてホテルスクリーニング機能を実現します