Bagaimana untuk menutup Kandungan yang Melimpah dengan Sudut Bulat dalam Chrome dan Opera?

Menyembunyikan Limpahan dengan Sudut Bulat dalam Chrome dan Opera

Soalan:

Bagaimana anda boleh buat div induk dengan sudut bulat yang berjaya menutup kandungan anak-anaknya sambil mengekalkan tingkah laku limpahan yang betul dalam Chrome dan Opera?

Ketidakserasian Webkit dengan Overflow: Tersembunyi

Dalam penyemak imbas seperti Firefox dan IE9, menggunakan "overflow: hidden" pada div induk dengan bucu bulat berkesan menyembunyikan sebarang kandungan yang melimpah. Walau bagaimanapun, dalam penyemak imbas berasaskan webkit (Chrome, Safari) dan Opera, pendekatan ini gagal apabila div induk diletakkan secara relatif atau mutlak.

Penyelesaian: WebKit Mask

Penyelesaian alternatif melibatkan penggunaan topeng webkit pada div induk. Pendekatan ini menutup kawasan di luar sudut bulat, dengan berkesan menyembunyikan sebarang kandungan yang melimpah.

Pelaksanaan:

Untuk melaksanakan penyelesaian ini, tambahkan CSS berikut pada div induk:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Sifat CSS ini merujuk kepada imej PNG lutsinar piksel tunggal, yang boleh disertakan terus dalam CSS untuk mengelakkan permintaan HTTP tambahan.

Contoh:

Pertimbangkan kod berikut:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* original CSS that broke overflow in webkit browsers */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* webkit mask fix */
}

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

<div><p>Dengan memasukkan pembetulan ini, sudut bulat kini akan menyembunyikan dengan berkesan sebarang kandungan yang melimpah dalam Chrome dan Opera, membolehkan visual bersih dan responsif reka bentuk.</p></div>

Atas ialah kandungan terperinci Bagaimana untuk menutup Kandungan yang Melimpah dengan Sudut Bulat dalam Chrome dan Opera?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!