Bagaimana Membuat Elemen Kanak-Kanak Sesuai dengan Sempadan Melengkung Ibu Bapa dalam CSS?

Memotong Elemen Anak Dalam Sempadan Melengkung Ibu Bapa

Dalam CSS, jika elemen anak (#dalam) melangkaui sempadan melengkung induknya (#luar), ada nampaknya percanggahan tingkah laku antara ibu bapa dan anak. Artikel ini meneroka sebab perkara ini berlaku dan menyediakan penyelesaian untuk memaksa elemen kanak-kanak mematuhi sempadan melengkung ibu bapa.

Isu Kanak-kanak Bertindih

Apabila elemen induk ( #luar) mempunyai sempadan melengkung menggunakan jejari sempadan dan elemen anak (#dalam) melangkaui sempadan ini, ia boleh membuat pertindihan. Ini kerana elemen kanak-kanak tidak dikekang secara lalai untuk menghormati sempadan melengkung ibu bapa mereka.

Limpahan: Penyelesaian Tersembunyi

Mengikut spesifikasi CSS, latar belakang dan kesan lain yang klip ke sempadan, seperti limpahan, juga harus klip ke lengkung. Oleh itu, menetapkan limpahan: tersembunyi pada elemen induk (#outer) harus menyelesaikan isu ini. Walau bagaimanapun, penyelesaian ini mungkin tidak berfungsi dalam penyemak imbas lama seperti Firefox 3.6 dan ke bawah.

Mozilla-Specific Hack

Untuk Firefox 3.6 dan ke bawah, penggodaman khusus diperlukan. Dengan memberikan lengkung pada sempadan individu, elemen anak (#inner) boleh dipaksa untuk mematuhi sempadan lengkung ibu bapa. Contohnya:

<code class="css">#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}</code>

Godam ini memastikan elemen kanak-kanak (#dalaman) menghormati sempadan lengkung induknya (#luar), walaupun dalam 浏览器 yang lebih tua.

Penyelesaian Dikemas Kini

Dalam penyemak imbas baharu seperti Firefox 4 dan ke atas, gabungan limpahan: tersembunyi dan jejari sempadan sudah memadai untuk memaksa elemen anak mematuhi sempadan melengkung ibu bapa mereka. Oleh itu, penyelesaian yang dikemas kini ialah:

<code class="css">#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}</code>

Ini memastikan keserasian merentas penyemak imbas untuk memotong elemen anak ke sempadan melengkung ibu bapa mereka.

Atas ialah kandungan terperinci Bagaimana Membuat Elemen Kanak-Kanak Sesuai dengan Sempadan Melengkung Ibu Bapa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!