CSS ロリポップを描くサンプルコード

背景: 毎日少しずつ進歩し、少しずつ積み重ねていけば、どんどん良くなっていきます

コード：

<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ロリポップ</title>
    <h3>CSS を使用してロリポップを描く</h3>

    <p>要件:</p>
    <p>1: ロリポップの中央のテキストは水平方向に中央揃えになっています</p>
    <p>2: 少なくとも 3 層のカラー</p>
<スタイル>
 。ラウンド{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: #e5e7e9;
    位置: 相対的;
    テキスト配置: 中央;
    マージン: 100px;
    フォント: 斜体 太字 17px/100px Arial、サンセリフ;
    ボックスシャドウ: 
        0 0 0 10ピクセル #4286b4,
        0 0 0 20px #fc052e,
        0 0 0 30px #FBDD00,
        0 0 0 40px #00BDFB;
    境界線の半径: 200px;
    色: #ffffff;
 }
 .バンバン{
    幅: 20px;
    高さ: 150px;
    マージン: -80px 0px 0px 142px;
    背景色: #00BDFB;
    境界線の半径: 10px;
 }
</スタイル>
</head>
<本文>
    <div class="round">
    こんにちは世界！
    </div>
    <div class="バンバン"></div>
</本文>
</html>

効果画像:

今日得た知識:

1:フォントの略称について

フォントスタイル:斜体;
フォントバリアント:small-caps;
フォントの太さ:太字;
フォントサイズ:12px;
行の高さ:1.5em;
フォントファミリー:arial,verdana;

次のように書くことができます:

フォント: 斜体太字 17px/100px Arial、サンセリフ;

17pxはフォントサイズを表します
100pxは行の高さを表します

略語を使用する際の注意点:

1:font-size と line-height は、スラッシュ / を使用して 1 つの値としてのみ記述でき、個別に記述することはできません。

2: 順序は変更できません。この短縮方法は、font-size 属性と font-family 属性の両方が同時に指定されている場合にのみ機能します。また、font-weight、font-style、font-variant を設定しない場合は、デフォルト値が使用されます。

2: センタリングについて

最も簡単な方法は、テキストの高さを div の高さと同じにして、text-align:center を設定することです。フォントを設定しない場合は、line-height:100px を設定します。これにより、テキストを中央揃えにする効果も得られます。

3: 国境について

私は複数の値に設定できる box-shadow 属性を使用します。これは現在のシナリオに適しています。値に 2 つのレイヤー、または 1 つのレイヤーが必要な場合は、境界線または 2 つの div ネストまたはアウトライン属性を直接設定できます。

要約する

上記はエディターが紹介した CSS でロリポップを描画するサンプルコードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: コンテンツウェブページの画像プレビューのデザイン

>>: ウィンドウ表示効果を実現するJavaScript