Comment créer facilement des divisions circulaires en CSS ?

Création simplifiée de divs circulaires en CSS

Les méthodes conventionnelles de création de divs circulaires impliquent souvent de générer des images de différentes tailles, ce qui peut prendre du temps et être inefficace. Cependant, CSS offre une solution plus pratique.

Pour créer des div circulaires à l'aide de CSS, appliquez simplement les étapes suivantes :

• CSS :

Définissez une classe de base pour tous les divs circulaires avec un arrondi border:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* for IE8 support */
}

• HTML:

Créez des éléments HTML à l'aide de la classe de base et spécifiez les dimensions et le style souhaités dans les classes personnalisées :

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Exemple :

Considérez ce qui suit exemple de code et sa sortie :

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>
<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Sortie :

Remarque : Internet Explorer 8 et versions antérieures nécessitent CSS3 PIE pour que cette technique fonctionne correctement.

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!