Maison  >  Article  >  interface Web  >  Comment faire un tour de div avec CSS

Comment faire un tour de div avec CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-07-23 14:21:006650parcourir

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.

Comment faire un tour de div avec CSS

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 :

Comment faire un tour de div avec CSS

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!

Déclaration:
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