Bagaimana untuk menetapkan bulatan dalam css

CSS ialah singkatan Cascading Style Sheet, iaitu bahasa helaian gaya yang digunakan untuk mentakrifkan gaya halaman HTML. Antaranya, menetapkan bulatan adalah operasi asas dalam CSS.

Dalam CSS, kita boleh menggunakan sifat jejari sempadan untuk menetapkan bulatan. Sifat ini mengawal sudut unsur, menjadikan sudutnya membulat. Dengan menggunakan jejari sempadan, kita boleh menetapkan sudut bulat bagi sesuatu elemen dengan menetapkan nilai yang sama. Pada masa yang sama, kita juga boleh menggunakan satu nilai untuk menetapkan sudut yang berbeza, atau berbilang nilai untuk menetapkan sudut yang berbeza.

Sebagai contoh, dalam kod berikut, kami menggunakan sifat jejari sempadan untuk menukar segi empat tepat menjadi bulatan:

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}

Di sini, kami menetapkan jejari sempadan kepada 50%, iaitu Separuh lebar dan tinggi. Ini akan membulatkan sudut elemen, menghasilkan bentuk bulat.

Jika kami ingin menetapkan sudut yang berbeza, kami boleh menggunakan kod yang serupa dengan yang berikut:

.custom-shape {
    width: 100px;
    height: 100px;
    border-radius: 50px 60px 70px 80px;
    background-color: blue;
}

Di sini, kami menetapkan jejari sempadan kepada atribut empat nilai dan menetapkan sudut yang berbeza. Ini akan menjadikan sudut sudut kiri atas dan sudut kanan bawah 50px, sudut kanan atas dan sudut kiri bawah 60px, tetapan seterusnya kepada 70px dan tetapan sebelumnya kepada 80px.

Jika kita ingin menambah sempadan bulat pada elemen, kita boleh menetapkan lebar dan gaya dalam atribut sempadan, contohnya:

.circle-border {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid black;
    background-color: green;
}

Di sini, kami menggunakan atribut sempadan untuk tetapkan sempadan unsur . Ini akan menyebabkan sempadan hitam selebar 5 piksel muncul di sekeliling elemen, manakala elemen akan kekal bulat.

Dalam aplikasi praktikal, kita boleh menggunakan elemen bulat sebagai butang, ikon atau avatar, dsb. Dengan menggunakan CSS, kami boleh mencapai kesan ini dengan mudah sambil mengekalkan keindahan dan kebolehbacaan halaman.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan bulatan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!