Mengapa Imej Pekeliling Dipotong dalam Safari dan Bagaimana Saya Boleh Membetulkannya?

Sudut Bulat (Jejari Sempadan) dalam Safari

Seseorang mungkin menghadapi masalah apabila menggunakan jejari sempadan, terutamanya dalam Safari, apabila cuba mencipta imej bulat.

Dalam Safari, imej yang ditetapkan dengan jejari sempadan dipangkas daripada sempadan luar elemen dan bukannya daripada imej itu sendiri. Ini menjadi jelas apabila imej berada dalam bekas dengan warna latar belakang yang berbeza daripada imej.

Untuk menyelesaikan isu ini, pisahkan sempadan daripada imej dengan meletakkan imej di dalam bekas. Selepas itu, gunakan jejari jidar pada kedua-dua imej dan bekas.

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</div>

.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;
}

Ini memastikan kedua-dua imej dan jidar mempunyai sudut bulat, menghasilkan jidar bulatan di sekeliling imej dalam Safari.

Atas ialah kandungan terperinci Mengapa Imej Pekeliling Dipotong dalam Safari dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!