css3で同心円を描く

今回はcss3を使って同心円を描く方法を紹介します。css3を使って同心円を描く際の注意点は何ですか？以下に実際の事例を見てみましょう。

基本的な考え方まず、3つの円を描く必要があります。次に、3つの円はどのように重なるでしょうか。これは -

margin

によって制御する必要があります。

<p id="tongxin">
    <p id=&#39;t1&#39;></p>
    <p id="t2"></p>
    <p id="t3"></p>
</p>

css

        #t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:-125px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:-100px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

結果

コード分析 上記のコードを理解するにはどうすればよいですか?たとえば、t2 の margin-left:-125px です。 margin-top:25px; 下の図を見てください

-125 は左に 125 ピクセル移動することを意味し、25 は下に 25 ピクセル移動することを意味します。なぜ 125 ピクセル左に移動するのでしょうか? これは、中学校でどれだけ数学を勉強したかによって異なります。 2 つの円の中心間の距離。大きな円の半径は 75 ピクセル、中央の円の半径は 50 ピクセルです。つまり、大きな円と小さな円の中心間の距離は125pxです。

25pxの垂直方向の移動は、円の垂直方向の中心距離が25pxであるためです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSセレクターの使用方法の詳細な説明

CSSマージンの特別な使用スキルの詳細な説明

ラジオボタンとチェックボックスのスタイルを最適化する

CSS 優先度の計算 基礎となるルール

以上がcss3で同心円を描くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。