У меня есть 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...
... Я не мог не заметить следующее описание в разделе "обрезка угла":
Другие эффекты, которые зажимаются на границе или край заполнения (например, "переполнение" кроме "видимых", также необходимо закрепить к кривой. Содержание замененных элементы всегда обрезаются до кривая края содержимого
Так что мне не хватает? Предполагается, что контент должен быть обрезан по углам? Я смотрю на устаревшую информацию? Я делаю это неправильно?