บังคับให้เด็กเชื่อฟังเส้นขอบโค้งของผู้ปกครองใน CSS

ฉันมี div อยู่ใน div อื่น #outerและ#inner. #outerมีเส้นขอบโค้งและพื้นหลังสีขาว #innerไม่มีขอบโค้งและพื้นหลังสีเขียว ขยายเกินเส้นขอบโค้งของ#inner #outerมีการหยุดสิ่งนี้หรือไม่?

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


    

ไม่ว่าจะลองยังไงก็ยังทับซ้อน ฉันจะ#innerเชื่อฟังและเติมเต็ม#outerพรมแดนได้อย่างไร?

แก้ไข

แฮ็คต่อไปนี้มีจุดประสงค์ในตอนนี้ แต่คำถามนั้นหมายถึง (อาจใช้กับ CSS3 และผู้เขียนเว็บเบราว์เซอร์): ทำไมองค์ประกอบลูกไม่เชื่อฟังเส้นขอบโค้งของผู้ปกครองและมีการบังคับให้พวกเขาทำต่อไปหรือไม่?

แฮ็คเพื่อแก้ไขปัญหานี้ตามความต้องการของฉันในตอนนี้คุณสามารถกำหนดเส้นโค้งให้กับเส้นขอบแต่ละเส้นได้ ดังนั้นสำหรับจุดประสงค์ของฉันฉันแค่กำหนดเส้นโค้งให้กับสองอันดับแรกขององค์ประกอบภายใน

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

ตามรายละเอียด:

พื้นหลังของกล่อง แต่ไม่ใช่ภาพขอบจะถูกตัดเป็นเส้นโค้งที่เหมาะสม (ตามที่กำหนดโดย "คลิปพื้นหลัง") เอฟเฟกต์อื่น ๆ ที่หนีบไปที่ขอบหรือขอบช่องว่าง (เช่น "ล้น" นอกเหนือจาก "มองเห็นได้") จะต้องคลิปเข้ากับเส้นโค้ง เนื้อหาขององค์ประกอบที่ถูกแทนที่จะถูกตัดให้เสมอกับเส้นโค้งขอบเนื้อหา นอกจากนี้พื้นที่นอกเส้นโค้งของขอบเส้นขอบไม่ยอมรับเหตุการณ์ของเมาส์ในนามขององค์ประกอบ

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

ซึ่งหมายความว่าoverflow: hiddenเมื่อวันที่#outerควรจะทำงาน อย่างไรก็ตามสิ่งนี้จะใช้ไม่ได้กับ Firefox 3.6 และต่ำกว่า สิ่งนี้ได้รับการแก้ไขใน Firefox 4:

ตอนนี้มุมที่โค้งมนจะตัดเนื้อหาและรูปภาพ (ถ้ามากเกินไป: ไม่ได้ตั้งค่าให้มองเห็นได้)

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

ดังนั้นคุณยังคงต้องการการแก้ไขเพียงย่อให้สั้นลงเป็น:

#outer {
  overflow: hidden;
}

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

ดูการทำงานที่นี่: http://jsfiddle.net/VaTAZ/3/

จะผิดอะไรขนาดนี้

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

หากคุณต้องการให้ขอบด้านล่างคม: ใช้สิ่งเหล่านี้:

เส้นขอบด้านบนซ้ายรัศมี: 10px;
ขอบบนขวารัศมี: 10px; 

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

คุณได้ลองสร้างตำแหน่ง: สัมพันธ์กับ div ภายในหรือไม่ ???

นั่นคือ:

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