Проблемы с отсечением границ CSS3

У меня есть div с граничным радиусом, установленным для некоторого значения (пусть, 10px), и вложенным div, который является полной шириной и высотой своего родителя.

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->

Я заметил, что родительский элемент не обрезает ребенка вокруг закругленных углов, несмотря на то, что переполнение становится скрытым. Другой поток stackoverflow указывает, что это поведение "по дизайну":

Как предотвратить переполнение изображения из округленного прямоугольника с помощью CSS3?

Однако, выкопав рабочий проект для фонов и границ CSS3...

http://www.w3.org/TR/css3-background/#corner-clipping

... Я не мог не заметить следующее описание в разделе "обрезка угла":

Другие эффекты, которые зажимаются на границе или край заполнения (например, "переполнение" кроме "видимых", также необходимо закрепить к кривой. Содержание замененных элементы всегда обрезаются до кривая края содержимого

Так что мне не хватает? Предполагается, что контент должен быть обрезан по углам? Я смотрю на устаревшую информацию? Я делаю это неправильно?

Ответы

Ответ 2

Если вы удалите position: relative; на обоих элементах, внешний элемент закроет дочерний элемент вокруг закругленных углов. Не знаете, почему, и если это ошибка.

Ответ 3

Просто захотелось перезвонить этому, так как я нашел это с аналогичной проблемой.

В div с переполнением, установленным для прокрутки, радиус границы не обрезал контент во время прокрутки, если содержимое не было прокручено до абсолютного верхнего или нижнего. Даже тогда обрезка только иногда появлялась, если я прокручивал документ до абсолютного верхнего или нижнего уровня.

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

Протестировано в Chrome, Safari и Firefox на Mac.

Ответ 4

Я пришел сюда, чтобы найти ответ, потому что у меня была аналогичная проблема в Chrome 18.

Я пытался иметь округлую коробку с двумя элементами внутри нее - заголовок и номер индекса - с номером индекса, расположенным абсолютно в нижнем левом углу окна.

Я заметил, что если бы у меня был такой HTML-код, элемент заголовка истекал бы за пределы закругленных углов (радиус-граница), даже если переполнение было скрыто в родительском элементе:

<a>
    <div style="overflow:hidden; border-radius:15px; position:relative;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>

Но если бы я переместил относительное позиционирование одного родительского элемента, все выглядело хорошо:

<a style="position:relative;">
    <div style="overflow:hidden; border-radius:15px;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>