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!