Maison > interface Web > tutoriel CSS > le corps du texte

Dessinez un cercle concentrique en utilisant CSS3

php中世界最好的语言
Libérer: 2018-03-21 17:06:20
original
2369 Les gens l'ont consulté

Cette fois, je vais vous apporter les précautions concernant l'utilisation de CSS3 pour dessiner des cercles concentriques. Ce qui suit est un cas pratique.

Idée de base

Vous devez d'abord dessiner trois cercles. Ensuite, comment les trois cercles se chevauchent-ils ? Cela doit être contrôlé par -marge.

<p id="tongxin">
    <p id=&#39;t1&#39;></p>
    <p id="t2"></p>
    <p id="t3"></p>
</p>
Copier après la connexion

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;
        }
Copier après la connexion

résultat


Analyse du code

Comment comprendre le code ci-dessus ? Par exemple, margin-left:-125px dans t2. margin-top:25px; Regardez l'image ci-dessous

-125 signifie un déplacement de 125 px vers la gauche, et 25 signifie un déplacement de 25 px vers le bas. Pourquoi est-il déplacé de 125 px vers la gauche ? Cela dépend de la qualité de vos études en mathématiques au collège ? La distance entre les centres de deux cercles. Le rayon du grand cercle est de 75 px et celui du cercle du milieu est de 50 px. En d’autres termes, la distance entre les centres du grand cercle et du petit cercle est de 125 px.

Le mouvement vertical de 25px est dû au fait que l'entraxe vertical du cercle est de 25px.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du sélecteur CSS

Explication détaillée des compétences d'utilisation particulières du CSS margin

Optimiser le style des boutons radio et des cases à cocher

Les règles sous-jacentes du calcul de la priorité CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!