Bagaimana untuk menjadikan elemen kanak-kanak menghormati sempadan melengkung ibu bapa dalam CSS?

"Sempadan melengkung memaksa elemen kanak-kanak menghormati sempadan elemen induk" dalam CSS

Masalah:

Dalam HTML, elemen anak diletakkan di dalam elemen induk dan elemen induk mempunyai jidar melengkung. Walau bagaimanapun, elemen anak akan melangkaui sempadan melengkung elemen induk. Bagaimana untuk menjadikan elemen kanak-kanak menghormati sempadan melengkung elemen induk?

Contoh kod CSS:

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

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}</code>

Jawapan:

Mengikut spesifikasi CSS3:

Kandungan elemen yang diganti sentiasa dipangkas ke lengkung tepi kandungan.

Ini bermakna tetapan limpahan:tersembunyi pada elemen induk #luar seharusnya berfungsi. Walau bagaimanapun, ini tidak berfungsi dalam Firefox 3.6 dan ke bawah. Isu ini telah dibetulkan dalam Firefox 4:

Sudut bulat kini klip kandungan dan imej (jika limpahan:visible tidak ditetapkan).

Jadi penyelesaiannya hendaklah:

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

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

Penyelesaian ini adalah untuk Firefox 3.6 dan ke bawah.

Atas ialah kandungan terperinci Bagaimana untuk menjadikan elemen kanak-kanak menghormati sempadan melengkung ibu bapa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!