css3で同心円を描く

php中世界最好的语言
リリース: 2018-03-21 17:06:20
オリジナル
2320 人が閲覧しました

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

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

margin

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

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!