Mengapa Imej Saya Dipotong Apabila Menggunakan `border-radius` dalam Safari?

Isu Sudut Bulat Safari

Apabila menggunakan jejari sempadan untuk mencipta sudut bulat pada imej, Safari boleh mempamerkan gelagat yang tidak menentu. Ini kerana enjin pemaparan penyemak imbas mempertimbangkan kedua-dua imej dan mana-mana sempadan sekeliling dalam pengiraan sudut bulat, mengakibatkan pemangkasan yang tidak diingini.

Memahami Masalah

Jom menggambarkan isu menggunakan imej 100px x 100px. Menambah jidar 3px meningkatkan dimensi elemen kepada 106px x 106px. Kini, penggunaan jejari sempadan sebanyak 20% menyebabkan bucu dipangkas daripada sempadan luar elemen dan bukannya daripada imej itu sendiri.

Penyelesaian: Mengasingkan Imej dan Sempadan

Untuk menyelesaikan isu ini dalam Safari, kami mesti memastikan bahawa kedua-dua imej dan sempadan mempunyai sudut bulat. Satu cara untuk mencapainya ialah dengan memisahkan sempadan daripada imej menggunakan elemen bekas, menggunakan jejari sempadan pada kedua-dua bekas dan imej.

Contoh

< ;div>

CSS:

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

Pendekatan ini memastikan kedua-dua imej dan sempadan telah dibundarkan sudut, menghasilkan penampilan yang konsisten merentas semua penyemak imbas.

Atas ialah kandungan terperinci Mengapa Imej Saya Dipotong Apabila Menggunakan `border-radius` dalam Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!