Примушення дитини дотримуватися викривлених кордонів батьків у CSS

135

У мене є інший дів. #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, однак, вам потрібно встановити їх індивідуально.

— Yi Jiang

199

Відповідно до специфікацій:

Фони коробки, але не його зображення рамки, вирізаються відповідною кривою (як визначено "фоном-кліпом"). Інші ефекти, які затискають до межі або краю прокладки (наприклад, "переповнення", крім "видимого"), також повинні затискати криву. Вміст замінених елементів завжди прирівнюється до кривої краю вмісту. Також область за межами кривої краю кордону не приймає події миші від імені елемента.

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

Що робити, якщо ми не хочемо, щоб вміст переповнення був прихованим? Прихований перелив відріже такі речі, як спливаючі підказки та меню вікон, які відображаються всередині.

— mae

1

Просто додайте переповнення: приховано; і радіус кордону до зовнішнього 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

Якщо ви хочете гострі краї на дні: Використовуйте такі:

межа-верхній-лівий-радіус: 10 пікселів;
межі - верхній правий радіус: 10 пікселів; 

-моз-бордюр-радіус-топлефт
-моз-бордюр-радіус-прямо

— tdtje
джерело

0

ви спробували скласти позицію: відносна для внутрішнього діла ???

це є:

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

— Naveed Butt
джерело