Dessinez un cercle en utilisant du CSS pur (exemple de code)

Cet article utilise des exemples de code pour présenter comment dessiner un cercle en utilisant du CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

L'idée de dessiner un cercle est très simple : dessinez d'abord deux cercles et définissez des couleurs de fond différentes, puis faites coïncider les centres des deux cercles ;

Facteur de difficulté

☆☆

HTML

<div class="container">
    <span class="ring-style"></span>
</div>

Analyse :

• Il y a un conteneur parent ici

CSS

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
.ring-style {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
    width: 260px;
    height: 260px;
    border-radius: 260px;
}
.ring-style::before {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 200px;
    height: 200px;
    border-radius: 200px;
}

Analyse :

• Définissez la largeur, la hauteur et l'arrondi coins de l'élément L'effet est de dessiner un cercle
• Créez deux cercles à travers ::before pseudo-élément et élément de corps
• En définissant les attributs haut, gauche et traduire en fonction de l'absolu positionnement du conteneur parent, Centrer l'élément horizontalement et verticalement en fonction du conteneur parent, de manière à ce que les centres des deux cercles coïncident

[Tutoriel recommandé : Tutoriel vidéo CSS]

Rendus

Points de connaissance

• bordure-rayon
• :: avant && ::après
• L'élément est centré horizontalement et verticalement

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation! !

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!