CSS3 проблемы ограничения радиуса границы

Question

У меня есть div с border-radius, установленным на какое-то значение (скажем, 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

... Я не мог не заметить следующее описание в разделе «отсечение угла»:

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

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

Answer 1

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

Answer 2

Это не дизайн, в Firefox есть существенный недостаток *1002*.Должно работать нормально в любом браузере WebKit.В Firefox вы должны либо добавить радиус границы для содержащегося элемента, либо использовать какой-нибудь хак .

Answer 3

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

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

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

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

Answer 4

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

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

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

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