Maison > interface Web > tutoriel CSS > 5 façons d'implémenter un cercle CSS (résumé)

5 façons d'implémenter un cercle CSS (résumé)

青灯夜游
Libérer: 2018-10-11 15:53:05
original
4045 Les gens l'ont consulté

Cet article présente principalement 5 méthodes (résumé) pour implémenter les cercles CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Je pensais qu'on me posait des questions sur le cercle des stages lors de mon entretien de stage l'année dernière, j'ai donc décidé d'écrire un article pour le résumer ! En résumé, il existe environ 5 méthodes.


1. Imbrication de deux balises :

<p class="element1">
    <p class="child1"></p>
</p>
Copier après la connexion
.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }
Copier après la connexion

2. éléments, avant/après

<p class="element2"></p>
Copier après la connexion
.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }
Copier après la connexion

3. Utiliser la bordure :

<p class="element3"></p>
Copier après la connexion
 .element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }
Copier après la connexion

4. -shadow

<p class="element4"></p>
Copier après la connexion
.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }
Copier après la connexion
<p class="element5">
Copier après la connexion
  .element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }
Copier après la connexion

5. Utilisez un dégradé radial

<p class="element6"></p>
Copier après la connexion
.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }
Copier après la connexion

si vous avez d'autres méthodes, dites-le-moi s'il vous plaît, merci ! ! !

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS  !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/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:
css
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