Bagaimana Membuat Elemen Kanak-kanak Menghormati Sempadan Melengkung dalam CSS: Persoalan Limpahan?

Menyelesaikan Dilema Kepatuhan Sempadan Anak-Ibubapa dalam CSS

Apabila berurusan dengan elemen bersarang dalam CSS, selalunya elemen anak perlu mematuhi sempadan melengkung unsur induknya. Walau bagaimanapun, ini kadangkala boleh menjadi isu, mengakibatkan elemen anak melangkaui had induknya.

Masalahnya:

Pertimbangkan kod HTML dan CSS berikut:

<code class="html"><div id="outer">
  <div id="inner"></div>
</div></code>

<code class="css">#outer {
  display: block;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: green;
  height: 10px;
}</code>

Dalam senario ini, div #dalaman akan melepasi sempadan melengkung #div luar, mewujudkan pertindihan yang tidak diingini.

Penyelesaian:

Mengikut spesifikasi CSS3, elemen seperti elemen peringkat blok digunting ke lengkung sempadan induknya. Walau bagaimanapun, terdapat beberapa pengecualian, salah satunya ialah elemen yang diganti.

Elemen Diganti:

Elemen yang diganti, seperti dan