Maison > Article > interface Web > Comment définir des bordures arrondies en CSS
La façon de définir une bordure arrondie en CSS est d'utiliser la bordure arrondie [border-radius]. Si les coins arrondis de ces quatre radians sont les mêmes, cela peut s'écrire sous la forme [border-radius : 30px". ;].
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.
Comment définir des bordures arrondies avec CSS :
Utilisation de base des bordures arrondies (border-radius) :
La plus basique des bordures arrondies l'usage est de définir quatre coins arrondis avec le même arc
boder-top-left-radius:30px; //左上角 boder-top-right-radius:30px; //右上角 boder-bottom-left-radius:30px; //右下角 boder-bottom-right-radius:30px; //左下角
Si les coins arrondis de ces quatre arcs sont les mêmes, cela peut s'écrire comme suit :
border-radius:30px;
css Définir la bordure arrondie :
Partie css :
.div1{ margin:0 auto; background: darkcyan; width:200px; height:200px; border:2px solid darkslategray; border-radius:30px; text-align: center; line-height: 200px; }
Partie html :
<div class="div1">圆角边框</div>
L'effet est comme indiqué :
Recommandé tutoriels associés : 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!