Rumah >hujung hadapan web >tutorial css >Peratusan lwn. Piksel/Ems untuk `jejari sempadan`: Apakah Perbezaannya?

Peratusan lwn. Piksel/Ems untuk `jejari sempadan`: Apakah Perbezaannya?

Linda Hamilton
Linda Hamiltonasal
2024-12-31 16:23:11873semak imbas

Percentages vs. Pixels/Ems for `border-radius`: What's the Difference?

Peratusan jejari sempadan lwn. Piksel dan Ems

Sifat jejari sempadan digunakan untuk mentakrifkan sudut bulat bagi sesuatu elemen . Ia memerlukan dua nilai, mewakili jejari mendatar dan menegak lengkung elips. Gelagat jejari sempadan berbeza bergantung pada sama ada peratusan atau piksel/em digunakan sebagai unit.

Peratusan

Mengikut spesifikasi W3C, apabila peratusan adalah digunakan untuk jejari sempadan, ia merujuk kepada dimensi kotak sempadan yang sepadan. Ini bermakna:

  • Jejari mendatar ialah 50% daripada lebar elemen.
  • Jejari menegak ialah 50% daripada ketinggian elemen.

Ini menghasilkan bentuk elips di mana kedua-dua jejari adalah berkadar dengan saiz elemen.

Pixel dan Ems

Sebaliknya, menggunakan satu nilai bukan peratusan (seperti piksel atau ems) untuk jejari sempadan akan sentiasa terhasil dalam bulatan. Ini kerana jejari yang sama digunakan pada kedua-dua paksi mendatar dan menegak.

Dalam contoh anda dengan jejari sempadan: 999px, jejari bulatan secara teorinya hendaklah 999px. Walau bagaimanapun, peraturan tambahan digunakan untuk mengelakkan lengkung bertindih, dengan berkesan mengurangkan jejari kepada separuh saiz sisi terkecil elemen. Jadi, jejari dalam kes ini menjadi 50px.

Perbandingan Antara Peratusan dan Bukan Peratusan Jejari Sempadan

Untuk elemen dengan saiz tetap, seperti dalam contoh anda , anda boleh mencapai hasil yang serupa menggunakan kedua-dua peratusan dan piksel. Dalam kes anda, jejari sempadan: 50%; adalah bersamaan dengan jejari sempadan: 115px/50px; (50% daripada kedua-dua belah pihak).

Atas ialah kandungan terperinci Peratusan lwn. Piksel/Ems untuk `jejari sempadan`: Apakah Perbezaannya?. 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