Memaksa anak untuk mematuhi batas lengkung orangtua di CSS

Saya memiliki div di dalam div lain. #outerdan #inner. #outermemiliki batas melengkung dan latar belakang putih. #innertidak memiliki batas melengkung dan latar belakang hijau. #innermeluas melampaui batas melengkung #outer. Apakah ada cara untuk menghentikan ini?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>


    

Tidak peduli bagaimana saya mencobanya masih tumpang tindih. Bagaimana saya bisa #innermematuhi dan memenuhi #outerperbatasan?

sunting

Retas berikut melayani tujuan untuk saat ini. Tetapi pertanyaannya tetap (mungkin untuk penulis CSS3 dan webbrowser): Mengapa elemen anak tidak mematuhi batas lengkung orang tua mereka dan apakah ada cara untuk memaksa mereka melakukannya?

Retas untuk menyiasati ini untuk kebutuhan saya untuk saat ini, Anda dapat menetapkan kurva ke batas individu. Jadi untuk tujuan saya, saya baru saja menetapkan kurva ke dua bagian atas elemen dalam.

#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;
}

Menurut spesifikasi:

Latar belakang kotak, tetapi bukan gambar batasnya, dipotong ke kurva yang sesuai (sebagaimana ditentukan oleh 'klip latar belakang'). Efek lain yang klip ke tepi perbatasan atau padding (seperti 'meluap' selain 'terlihat') juga harus klip ke kurva. Konten elemen yang diganti selalu dipangkas ke kurva tepi konten. Juga, area di luar kurva tepi perbatasan tidak menerima peristiwa mouse atas nama elemen.

http://www.w3.org/TR/css3-background/#the-border-radius

Ini berarti bahwa overflow: hiddenon #outerharus bekerja. Namun, ini tidak akan berfungsi untuk Firefox 3.6 dan di bawah. Ini diperbaiki di Firefox 4:

Sudut bundar sekarang klip konten dan gambar (jika meluap: terlihat tidak disetel).

https://developer.mozilla.org/en/CSS/-moz-border-radius

Jadi, Anda masih perlu memperbaikinya, persingkat menjadi:

#outer {
  overflow: hidden;
}

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

Lihat berfungsi di sini: http://jsfiddle.net/VaTAZ/3/

Apa yang salah dengan ini?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

Jika Anda ingin tepi tajam di bagian bawah: Gunakan ini:

batas-atas-kiri-radius: 10px;
border-top-right-radius: 10px; 

-moz-border-radius-topleft
-moz-border-radius-topright

Sudahkah Anda mencoba membuat posisi: relatif untuk div bagian dalam ???

itu adalah:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}