Принуждение ребенка соблюдать изогнутые границы родителей в CSS

Question

У меня есть 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?

1020 * редактировать *

Следующий хак послужил цели на данный момент. Но вопрос стоит (может быть, 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;
}

Answer 1

Согласно спецификации:

Фоны ящика, но не его border-image, обрезаны до соответствующая кривая (как определено «Фон-клип»). Другие эффекты, которые клип к границе или отступу (например, «переполнение», кроме «Видимый») также должен кривая. Содержание заменено элементы всегда обрезаны до кривая границы содержимого. Также площадь вне кривой края границы не принимает события мыши от имени элемента.

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/

Answer 2

Если вы хотите острые края на дне: используйте эти:

border-top-left-radius: 10px;
border-top-right-radius: 10px; 

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

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

Answer 4

Вы пытались сделать позицию: относительно внутреннего div ???

то есть:

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