Bagaimana untuk Menghadkan Kandungan Kanak-kanak Dalam Sempadan Induk Melengkung dalam CSS?

Mengekang Kandungan Kanak-Kanak Dalam Tepi Lengkung Ibu Bapa dalam CSS

Soalan:

Bagaimana untuk mengelakkan div kanak-kanak, "#inner," daripada melangkaui sempadan melengkung div induknya, "#outer," walaupun cuba menghalangnya?

Penjelasan:

Menurut CSS spesifikasi, sempadan dan kesan latar belakang klip ke lengkung, manakala elemen yang diganti sentiasa memangkas kandungannya ke lengkung. Walau bagaimanapun, kandungan masih boleh bertindih.

Penyelesaian:

1. Limpahan: tersembunyi pada #luar: Dalam penyemak imbas selain Firefox 3.6 dan di bawah, ini harus mengehadkan kandungan #dalaman kepada lengkung induk.

2. Keluk Sempadan Khusus pada #dalam: Sebagai alternatif, tentukan lengkung khusus untuk setiap sempadan dalam Firefox 3.6 dan lebih rendah.

   #inner {
     -moz-border-radius: 10px 10px 0 0;
   }

3. Limpahan: Lengkung Khusus tersembunyi pada #dalam: Untuk keserasian optimum, gabungkan kedua-dua pendekatan untuk penyelesaian yang bersih.

   #outer {
     overflow: hidden;
   }
   
   #inner {
     -moz-border-radius: 10px 10px 0 0;
   }

Contoh:

<div id="outer" style="background-color: white; overflow: hidden; border-radius: 10px;">
  <div id="inner" style="background-color: green; -moz-border-radius: 10px 10px 0 0;">
  </div>
</div>

Hasil:

dalaman kini menghormati sempadan melengkung #luar, memastikan visual reka bentuk yang harmoni.

Atas ialah kandungan terperinci Bagaimana untuk Menghadkan Kandungan Kanak-kanak Dalam Sempadan Induk Melengkung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!