Kaedah: 1. Tambahkan gaya "lebar: diameter; tinggi: nilai diameter;" pada elemen kotak input dan tetapkan kotak input kepada segi empat sama 2. Gunakan atribut "jejari sempadan" untuk tetapkan kotak input segi empat sama Untuk menjadikannya bulat, anda hanya perlu menambah gaya "border-radius:100%;" pada kotak input.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk menetapkan kotak input kepada bulatan dalam css
Dalam css, anda boleh mula-mula menetapkan kotak input kepada segi empat sama dan kemudian tetapkan bulatan kotak input Sudut boleh digunakan untuk menetapkan kotak input menjadi bulat.
Pada masa ini, anda perlu menggunakan atribut jejari sempadan Fungsi atribut ini adalah untuk menetapkan sempadan bulat bagi elemen.
Contoh adalah seperti berikut:
<!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>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kotak input menjadi bulat dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
