Rumah >hujung hadapan web >tutorial css >Piksel lwn. Peratusan dalam CSS `border-radius`: Bagaimanakah Ia Berbeza?
Piksel lwn. Peratusan dalam CSS `border-radius`: Bagaimanakah Ia Berbeza?
- DDDasal
- 2024-12-27 22:37:12192semak imbas
Jejari sempadan: Piksel atau Peratusan?
Apabila menggunakan CSS untuk menentukan jejari sempadan elemen, anda mungkin perasan bahawa bentuk yang terhasil berbeza bergantung pada sama ada anda menggunakan nilai piksel atau peratusan. Dalam artikel ini, kami akan menyelidiki sebab ini berlaku dan meneroka implikasi untuk reka bentuk anda.
Harta Jejari Sempadan
Sempadan- sifat jejari menentukan lengkung di penjuru sesuatu unsur. Ia menerima dua nilai, mewakili jejari pada paksi X dan Y bagi suku elips yang menentukan bentuk sudut.
Nilai Peratusan
Mengikut spesifikasi W3C, nilai peratusan untuk jejari sempadan merujuk kepada lebar dan ketinggian kotak sempadan elemen.
Contohnya, jejari sempadan: 50%; mentakrifkan jejari seperti berikut:
- jejari paksi-X: 50% daripada lebar bekas
< ;li>paksi-Y jejari: 50% daripada ketinggian bekas
Ini menghasilkan bentuk elips dengan jejari yang sama pada kedua-dua paksi.
Pixel dan Lain-lain Unit
Menggunakan mana-mana unit selain daripada peratusan (cth., piksel, em, unit port pandang) akan menghasilkan elips dengan jejari yang sama, dengan berkesan mencipta bulatan.
Walau bagaimanapun, jika bulatan yang terhasil bertindih dengan sempadan elemen, peraturan berbeza digunakan. Jejari dikecilkan kepada separuh saiz sisi terkecil unsur. Ini memastikan bahawa lengkung tidak melangkaui sempadan elemen.
Dalam contoh anda:
latar belakang: teal;<br> jejari sempadan: 999px;<br> lebar: 230px;<br> tinggi: 100px;<br> ...<br>}
Jejari sempadan: 999px; akan menghasilkan bulatan. Walau bagaimanapun, memandangkan bulatan bertindih dengan ketinggian elemen, jejari dilaraskan kepada 50px, separuh daripada ketinggian.
Untuk elemen ini, anda boleh mencapai hasil yang sama menggunakan kedua-dua piksel dan peratusan, kerana 50% daripada kedua-dua lebar dan tinggi adalah bersamaan dengan 115px/50px:
jejari sempadan: 50%;<br>}<br>.piksel {<br> jejari sempadan: 115px/50px;<br>}<br>/<em> ... </em>/<div class="pixels">border-radius: 115px/50px;</div>
Atas ialah kandungan terperinci Piksel lwn. Peratusan dalam CSS `border-radius`: Bagaimanakah Ia Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!