Bagaimanakah menetapkan lebar dan tinggi kepada 0, lebar sempadan yang besar dan jejari sempadan yang sepadan mencipta bulatan dalam CSS?-tutorial css-php.cn

Bagaimanakah menetapkan lebar dan tinggi kepada 0, lebar sempadan yang besar dan jejari sempadan yang sepadan mencipta bulatan dalam CSS?

DDD

Lepaskan： 2024-11-11 11:59:02

asal

376 orang telah melayarinya

How does setting width and height to 0, a large border width, and a matching border-radius create a circle in CSS?

Bagaimanakah CSS ini menghasilkan bulatan?

Mari kita pecahkan CSS dahulu:

div {
lebar: 0;
tinggi: 0;
jidar: 180px merah pepejal;
jejari sempadan: 180px;
}

lebar dan tinggi kedua-duanya ditetapkan kepada 0, yang bermaksud elemen itu tidak akan mempunyai kandungan.

sempadan ditetapkan kepada 180px merah pepejal, yang bermaksud elemen itu akan mempunyai sempadan merah selebar 180 piksel.

jejari sempadan ditetapkan kepada 180px, yang bermaksud sudut sempadan akan dibundarkan kepada jejari 180 piksel.

Sekarang, mari kita fikirkan tentang cara sifat ini berfungsi bersama untuk mencipta bulatan.

Di manakah lebar dan ketinggian sebenarnya gunakan?

Sifat lebar dan tinggi digunakan pada kandungan elemen, bukan pada jidar. Dalam kes ini, memandangkan elemen tidak mempunyai kandungan, sifat lebar dan ketinggian tidak mempunyai kesan.

Di manakah jejari sempadan digunakan?

Sifat jejari sempadan digunakan pada sempadan unsur. Ia membolehkan anda membundarkan sudut sempadan ke jejari tertentu. Dalam kes ini, sifat jejari sempadan ditetapkan kepada 180px, yang bermaksud sudut sempadan akan dibundarkan kepada jejari 180 piksel.

Apakah maksud ini untuk kami jejari sempadan/bulatan?

Apabila anda menggabungkan sifat jejari sempadan dan sempadan, anda boleh mencipta bulatan. Sifat sempadan mencipta sempadan segi empat tepat di sekeliling elemen dan sifat jejari sempadan mengelilingi penjuru sempadan ke jejari yang ditentukan. Dalam kes ini, sifat jejari sempadan ditetapkan kepada 180px, yang bermaksud sudut sempadan akan dibundarkan kepada jejari 180 piksel. Ini mewujudkan bulatan.

Berikut ialah gambar rajah yang menunjukkan cara peraturan CSS dalam contoh berfungsi bersama untuk mencipta bulatan:

Contoh imej

Dalam rajah, kandungan sebenar elemen anda (titik hitam kecil) benar-benar tidak wujud. Jika anda tidak menggunakan sebarang jejari sempadan, anda akan mendapat kotak hijau. Jejari sempadan memberi anda bulatan biru.

Sumber lanjut

W3C: Modul Latar Belakang dan Sempadan CSS Tahap 3 (esp. 5. Bulat Sudut)

Demonstrasi

Atas ialah kandungan terperinci Bagaimanakah menetapkan lebar dan tinggi kepada 0, lebar sempadan yang besar dan jejari sempadan yang sepadan mencipta bulatan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!