Apa yang berlaku apabila jejari sempadan bertindih?

Keistimewaan sudut bulat CSS Borders adalah aplikasi yang fleksibel. Ia bukan sahaja boleh menetapkan radius sudut bulat bersatu, tetapi juga menetapkan nilai yang berbeza untuk sudut yang berbeza. Walau bagaimanapun, apabila radius yang dibulatkan, pelayar melakukan beberapa "di belakang tabir" pemprosesan, yang boleh membawa kepada beberapa hasil yang tidak dijangka.

Ramai pemaju sudah biasa dengan teknik "999em hack" untuk mencipta segi empat tepat "berbentuk pil". Dengan menetapkan nilai radius sempadan yang besar (seperti 999em atau 999Vmax), sudut-sudut segi empat tepat boleh dibulatkan dengan sempurna. Kelebihan kaedah ini ialah ia dapat mencapai kesan tanpa mengetahui saiz segi empat tepat.

Walau bagaimanapun, teknik ini mungkin mempunyai tingkah laku yang tidak normal dalam beberapa kes. Sebagai contoh, apabila kita cuba membuat sudut bulat "berbentuk pil" di sebelah kanan segi empat tepat dan menetapkan sudut bulat yang lebih kecil di sebelah kiri, sudut bulat di sebelah kiri mungkin hilang atau menjadi sangat kecil.

Ini kerana untuk mengelakkan tumpang tindih radii sudut bulat, penyemak imbas akan menyesuaikannya mengikut spesifikasi. Formula kompleks dalam spesifikasi direka untuk memastikan semua radii bulat dikurangkan ke skala, dengan itu mengelakkan pertindihan.

Penyemak imbas mengira nisbah jumlah panjang setiap sisi segi empat tepat ke radius sudut bulat bersebelahan. Ia kemudiannya melipatgandakan semua radii bulat oleh nisbah terkecil ini. Dengan cara ini, semua radii bulat akan dikurangkan sehingga ia tidak lagi bertindih.

Mari kita gambarkan dengan contoh: Jika segi empat tepat 200px lebar, ketinggian 100px, jejari sudut bulat di sebelah kanan adalah 400px dalam radius di sebelah kiri adalah 40px dalam radius. Penyemak imbas mengira nisbah:

<code>顶部：200px / (40px 400px) = 0.455右侧：100px / (400px 400px) = 0.125底部：200px / (40px 400px) = 0.455左侧：100px / (40px 40px) = 1.25</code>

Nisbah minimum adalah 0.125, jadi semua radii bulat akan didarab dengan 0.125. Hasilnya ialah jejari sudut bulat di sebelah kanan menjadi 50px dan jejari sudut bulat di sebelah kiri menjadi 5px.

Mekanisme skala-bawah ini memastikan bahawa radii sudut bulat tidak bertindih, tetapi pada masa yang sama ia juga boleh menyebabkan radii sudut bulat yang lebih kecil menjadi lebih tinggi dan bahkan kelihatan hilang.

Sebab mengapa penyemak imbas memilih cara ini ialah ia dapat mengekalkan hubungan berkadar antara jejari sudut bulat. Sekiranya penyemak imbas mengamalkan strategi lain, seperti menyempitkan radius bulat maksimum, ia boleh menyebabkan hasil akhir lebih berbeza daripada jangkaan pemaju.

Singkatnya, memahami mekanisme pemprosesan sudut bulat bertindih di sempadan CSS membantu pemaju mengawal kesan sudut yang lebih baik dan mengelakkan hasil yang tidak dijangka. Terima kasih kepada rakan sekerja saya Catherine untuk pertama kali menemui isu ini, dan James membantu saya memahami spesifikasi!

Atas ialah kandungan terperinci Apa yang berlaku apabila jejari sempadan bertindih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!