Maison > Article > interface Web > Comment faire des boutons ronds dans le style CSS
Comment faire des boutons ronds dans le style CSS
- 藏色散人original
- 2021-02-28 10:17:288507parcourir
Comment rendre un bouton rond en utilisant le style CSS : créez d'abord un exemple de fichier HTML ; puis définissez un bouton de bouton et enfin définissez les quatre coins du bouton sur des coins arrondis via l'attribut "border-radius" dans css.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Tournez le bouton en cercle (avec un radian)
border-radius peut transformer le bouton en cercle, ou ajouter une bordure en radian à p
Règles de rayon de bordure :
Une valeur : les quatre coins arrondis ont la même valeur
Deux valeurs : la première valeur est le coin supérieur gauche et le coin inférieur droit, La deuxième valeur est le coin supérieur droit et le coin inférieur gauche
Trois valeurs : la première valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit et le coin inférieur gauche, la troisième valeur est le coin inférieur droit
Quatre valeurs : la première valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit, la troisième valeur est le coin inférieur droit et la quatrième valeur est le coin inférieur gauche .
Style :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>Parfois, le rayon de bordure échouera
Solution : Universel !important ;
Ajoutez !important dans l'attribut border-radius pour permettre au navigateur d'exécuter cette instruction en premier
border-radius: 6px !important;
en CSS important est généralement utilisé ! pour le piratage sur les versions inférieures sauf iE 6. Elle est suivie de l'instruction !important css pour permettre au navigateur d'exécuter cette instruction en premier, car css a hérité des styles, l'ajout de !importanrt peut remplacer le style du parent.
Recommandé : "Tutoriel vidéo HTML"
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!