Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kotak input menjadi bulat dalam css

Bagaimana untuk menetapkan kotak input menjadi bulat dalam css

WBOYasal: 2021-11-29 11:57:344911semak imbas

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:

Bagaimana untuk menetapkan kotak input menjadi bulat dalam css

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

html5 css css3 border

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk membuat paparan div di bahagian bawah halaman dengan cssArtikel seterusnya：Bagaimana untuk membuat paparan div di bahagian bawah halaman dengan css

Artikel berkaitan

Lihat lagi