Bagaimanakah Saya Boleh Membetulkan Isu Limpahan Sudut Bulat CSS3 dalam Penyemak Imbas Webkit?

Limpahan Masking Sudut Bulat CSS3: Penyelesaian Merentas Pelayar

Dalam bidang reka bentuk web, sudut bulat telah menjadi elemen reka bentuk yang penting . Walau bagaimanapun, apabila digunakan pada div induk, mereka boleh mendedahkan kandungan limpahan dalam penyemak imbas berasaskan webkit seperti Chrome dan Opera. Isu ini timbul terutamanya apabila div induk diletakkan secara relatif atau mutlak.

Dilema Webkit/Opera

Kod CSS di bawah, yang berfungsi dengan sempurna dalam Firefox dan IE9, gagal dalam penyemak imbas berasaskan webkit kerana pepijat ini:

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

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

A Penyelesaian Silang Penyemak Imbas

Nasib baik, penyelesaian bijak telah muncul yang menyelesaikan isu ini merentas penyemak imbas:

1. Tambahkan Topeng CSS WebKit: Gunakan -webkit-mask-image property kepada div induk dengan imej PNG piksel tunggal. Benamkan imej dalam CSS itu sendiri untuk menghapuskan permintaan HTTP.

Kod Kemas Kini:

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

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

Penyelesaian ini mewujudkan semula tingkah laku yang diingini, menutup kandungan limpahan dalam sudut bulat walaupun dalam pelayar berasaskan webkit. Ia secara berkesan menambal pepijat khusus penyemak imbas dan memastikan penggayaan yang konsisten merentas platform yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Isu Limpahan Sudut Bulat CSS3 dalam Penyemak Imbas Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!