Maison >interface Web >tutoriel CSS >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

WBOY
WBOYoriginal
2021-11-29 11:57:344968parcourir

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.

Comment définir la zone de saisie pour qu'elle soit circulaire en CSS

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 :

Comment définir la zone de saisie pour quelle soit circulaire en CSS

(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!

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