Rumah >hujung hadapan web >tutorial css >Mengapakah `jejari sempadan` Berkelakuan Berbeza dengan Piksel dan Peratusan?

Mengapakah `jejari sempadan` Berkelakuan Berbeza dengan Piksel dan Peratusan?

Patricia Arquette
Patricia Arquetteasal
2024-12-30 06:22:13142semak imbas

Why Does `border-radius` Behave Differently with Pixels and Percentages?

Percanggahan Jejari Sempadan

Kelakuan sifat jejari sempadan berbeza bergantung pada sama ada nilai piksel atau peratusan digunakan.

Pixel dan EM Nilai

Apabila menggunakan nilai piksel atau EM, jejari sempadan mencipta arka bulat atau bentuk pil. Ini kerana hanya satu nilai yang ditentukan, jadi jejari mendatar dan menegak adalah sama. Jika nilai yang ditentukan melebihi saiz elemen, jejari dikecilkan kepada separuh saiz sisi terkecil.

Nilai Peratusan

Sebaliknya, apabila nilai peratusan digunakan, jejari sempadan menghasilkan bentuk bujur atau elips. Ini kerana peratusan merujuk kepada dimensi kotak sempadan yang sepadan. Contohnya, jejari sempadan: 50% menetapkan jejari mendatar kepada 50% daripada lebar elemen dan jejari menegak kepada 50% daripada ketinggian elemen.

Untuk mencapai bentuk bulat dengan nilai peratusan, dua nilai mesti ditentukan, mewakili jejari mendatar dan menegak. Contohnya, jejari sempadan: 50%/25% menghasilkan bulatan dengan jejari mendatar 50% daripada lebar elemen dan jejari menegak sebanyak 25% daripada ketinggian elemen.

Perbezaan ini timbul daripada W3C spesifikasi, yang menyatakan bahawa nilai peratusan untuk jejari sempadan merujuk kepada dimensi kotak sempadan yang sepadan.

Atas ialah kandungan terperinci Mengapakah `jejari sempadan` Berkelakuan Berbeza dengan Piksel dan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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