Mengapa CSS3 `border-radius` Melimpah dalam Chrome/Opera, dan Bagaimana Ia Boleh Dibetulkan?

Cara Menyelesaikan Isu Limpahan dengan Sudut Bulat CSS3 dalam Chrome/Opera

Dalam situasi tertentu, menggunakan sifat jejari sempadan CSS3 untuk mencipta bulat sudut pada div induk boleh mengakibatkan limpahan kandungan dalam penyemak imbas Chrome dan Opera. Isu ini timbul apabila ibu bapa diletakkan secara relatif atau mutlak.

Pendekatan Asal

Kod berikut menunjukkan masalah dalam Chrome/Opera:

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

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

Pendekatan ini, yang berfungsi dalam Firefox dan IE9, gagal menutup kandungan yang melimpah dalam Chrome/Opera.

Penyelesaian Yang Diperbaiki

Penyelesaian melibatkan penambahan WebKit CSS Mask pada elemen #wrapper:

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

Pendekatan ini menggunakan imej PNG piksel tunggal untuk menentukan topeng CSS yang menutup kandungan yang melimpah. Ia berkesan menyelesaikan isu limpahan dalam Chrome/Opera, mengekalkan sudut bulat.

Atas ialah kandungan terperinci Mengapa CSS3 `border-radius` Melimpah dalam Chrome/Opera, dan Bagaimana Ia Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!