Maison > Article > interface Web > Comment faire un tour de div avec CSS
En CSS, vous pouvez utiliser l'attribut border-radius pour définir un div comme étant rond. Il vous suffit d'ajouter le style "border-radius:50%" à l'élément div. Cette propriété permet d'ajouter des bordures arrondies à l'élément. Le rayon des coins arrondis ne peut pas dépasser la moitié de la largeur/hauteur.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Vous pouvez utiliser le pourcentage comme unité pour la bordure arrondie. Par exemple, si vous définissez la bordure arrondie d'un carré à 50 %, un cercle sera formé. Cependant, l'utilisation de pourcentages et de pixels n'est pas équivalente.
Remarque : Une fois le pourcentage supérieur à 50%, la forme ne changera plus. Le rayon du congé ne peut pas dépasser la moitié de la largeur/hauteur.
Exemple :
partie css :
.box1{ width:200px; height:200px; margin: 30px auto; border: 2px solid #e4007e; text-align: center; line-height: 200px; font-weight: bold; font-size: 24px; background: burlywood; border-radius: 50%;//圆角百分比 }
partie html :
.<div class="box1">这是一个圆</div>
L'effet est comme indiqué sur la figure :
Apprentissage recommandé : Tutoriel vidéo 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!