Mengapa Sudut Bulat dengan `overflow: hidden` Gagal dalam WebKit dan Opera, dan Bagaimana Saya Boleh Membetulkannya?

Mengatasi Isu Tersembunyi Limpahan dengan Sudut Bulat CSS3 dalam WebKit dan Opera

Memastikan kandungan di bawah bucu bulat selalunya melibatkan penggunaan limpahan: sifat tersembunyi. Walau bagaimanapun, teknik ini boleh tidak berfungsi dalam penyemak imbas berasaskan WebKit (termasuk Chrome) dan Opera apabila elemen induk diletakkan secara relatif atau mutlak.

Masalah:

Untuk menggambarkan isu, pertimbangkan kod berikut:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

Dalam kes ini, div #wrapper diletakkan secara mutlak dan mempunyai bucu bulat. Walau bagaimanapun, kandungan #box div tumpah di luar sudut bulat dalam penyemak imbas dan Opera berasaskan WebKit.

Penyelesaian: WebKit CSS Mask

Penyelesaian alternatif untuk menangani isu ini ialah menggunakan WebKit CSS Mask pada elemen #wrapper. Ini melibatkan penggunaan imej PNG piksel tunggal sebagai topeng:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
  /* This fixes the overflow in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

Teknik ini berjaya menyembunyikan limpahan dalam penyemak imbas dan Opera berasaskan WebKit, membolehkan sudut bulat menutup kandungan elemen kanak-kanak dengan berkesan.

Atas ialah kandungan terperinci Mengapa Sudut Bulat dengan `overflow: hidden` Gagal dalam WebKit dan Opera, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!