Comment faire des boutons ronds dans le style CSS-tutoriel CSS-php.cn

Comment faire des boutons ronds dans le style CSS

藏色散人

Libérer： 2023-01-03 09:25:56

original

8496 Les gens l'ont consulté

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.

Comment faire des boutons ronds dans le style 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>

Copier après la connexion

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;

Copier après la connexion

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!