Maison  >  Article  >  interface Web  >  Comment définir des bordures arrondies en CSS

Comment définir des bordures arrondies en CSS

coldplay.xixi
coldplay.xixioriginal
2021-04-29 15:50:4020023parcourir

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". ;].

Comment définir des bordures arrondies en CSS

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

Comment définir des bordures arrondies en CSS

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!

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