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

135

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

css

— Дэниел Бингхэм
источник

Вы пытались установить точно такой же радиус границы для внутреннего элемента?

— Даниэль О'Хара

1

Но я хочу, чтобы радиус границы внутреннего элемента был прямым снизу. Можно ли установить радиус границы только для определенного угла?

— Дэниел Бингхэм

Для уверенности. Вы даже можете назначить их как border-radius: TL TR BL BR.

— Даниэль О'Хара

29

Я читаю это как «принуждение ребенка подчиняться приказам родителей». :)

— Беннор Маккарти

За исключением Safari, -moz-border-radiusи border-radiusможет быть использовано в качестве краткого обозначения с четырьмя значениями: 10px 10px 0 0. Однако для Safari вам нужно установить их индивидуально.

— И Цзян

199

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

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

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/

— И Цзян
источник

1

Бинго, я тестировал Firefox 3.6. Так что это объясняет это.

— Дэниел Бингхэм

1

Любой, кто придет в это поздно в игре, overflow: hidden;работает над текущими версиями FF. Убедитесь, что вы тестируете обратно настолько, насколько это необходимо

— BillyNair

Просто хочу отметить, что у скрипки есть поля, поэтому реальный эффект overflow hiddenскрыт

— user10089632 03

Что, если мы не хотим, чтобы содержимое переполнения было скрыто? Скрытое переполнение отключит такие элементы, как всплывающие подсказки и оконные меню, которые появляются внутри.

— Мэ

1

Просто добавьте переполнение: скрыто; и border-radius к внешнему DIV

— Надер

1

Что было бы не так с этим?

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

— Джарретт Видман
источник

Я хочу, чтобы дно было с острыми углами. Это заняло бы два внутренних деления, один из которых дал отрицательный запас для перекрытия другого.

— Дэниел Бингхэм,

Хм ... оказывается, можно установить отдельные углы. Так что я просто установил два лучших.

— Дэниел Бингхэм,

1

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

border-top-left-radius: 10px;
граница-верх-правый-радиус: 10 пикселей; 

-moz-граница радиус-верхний-левый
-moz-граница радиуса-topright

— tdtje
источник

0

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

то есть:

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

— Навид Батт
источник