Maison > Article > interface Web > Comment définir la zone de saisie pour qu'elle soit circulaire en CSS
Comment définir la zone de saisie pour qu'elle soit circulaire en CSS
- WBOYoriginal
- 2021-11-29 11:57:344868parcourir
Méthode : 1. Ajoutez le style « largeur : valeur de diamètre ; hauteur : valeur de diamètre ; » à l'élément de la zone de saisie et définissez la zone de saisie sur un carré. 2. Utilisez l'attribut « border-radius » pour définir l'entrée carrée ; boîte à un cercle. Ajoutez simplement le style "border-radius:100%;" à la zone de saisie.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir la zone de saisie pour qu'elle soit circulaire en CSS
En CSS, vous pouvez d'abord définir la zone de saisie sur un carré, puis définir les coins arrondis de la zone de saisie pour définir la zone de saisie sur un cercle .
À ce stade, vous devez utiliser l'attribut border-radius. La fonction de cet attribut est de définir la bordure arrondie de l'élément.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>123</title>
<style type="text/css">
.myinput{
width:100px;
height:100px;
border-radius:100%;
}
</style>
</head>
<body>
<input type="text" value="" class="myinput" placeholder="这是一个input"/>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : 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!