Должен ли пограничный радиус обрезать контент?

Не следует ли обрезать содержимое моего контейнера, когда контейнер имеет border-radius?

Пример HTML и CSS:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

Как вы можете видеть, я использую border-radius в контейнере (.progressbar), но содержимое (.buffer) выходит за пределы контейнера. Я вижу это в Google Chrome.

Является ли это ожидаемым поведением?

P.S. Речь идет не о том, как это исправить, а о том, должно ли оно работать так.

Ответы

Ответ 1

Является ли это ожидаемым поведением?

Да, как сумасшедший, как кажется, на самом деле. Вот почему:

Элементы по умолчанию overflow для <div> (и большинство других вещей) - visible, а spec говорит об этом overflow: visible:

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

В свою очередь, §5.3 Угловая обрезка в модуле "Фоны и границы" гласит:

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

В предложении, которое я подчеркивал, специально упоминается, что значение overflow поля должно быть чем-то иным, чем visible (это означает auto, hidden, scroll и другие), чтобы углы, чтобы закрепить его детей.

Если в поле указано видимое переполнение, которое, как я уже сказал, является значением по умолчанию для большинства визуальных элементов, тогда содержимое не должно быть обрезано вообще. И поэтому квадратные углы .buffer проходят по закругленным углам .progressbar.

Следовательно, самый простой способ получить .buffer для клипа в .progressbar закругленных углах - добавить стиль overflow: hidden к .progressbar, как показано в этой обновленной скрипке.

Ответ 2

Для кого-то интересно, какое будет исправление. Самый простой способ - отредактировать css.

В приведенном примере это будет подходящее исправление:

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }

Ответ 3

Этот вопрос, похоже, указывает на тот же дефект, по-видимому, это ошибка.

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

Edit

Ик! BoltClock упомянул, что это исправлено, поэтому я опубликую этот другой вопрос SO по этой теме, пока я также охочусь за цитату спецификации. Как предотвратить переполнение изображения из округленного прямоугольника с помощью CSS3?

Ссылка на спецификацию

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

CSS Фоны - закругленные углы

Ответ 4

Это то, что спецификация говорит, поэтому так оно и должно работать. Но это не значит, что Chrome делает это так.

5,3. Угловая обрезка

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

http://www.w3.org/TR/css3-background/#border-radius

Ответ 5

Семантически говоря, лучше всего просто добавить свойство наследования на границе радиуса во внутренний div, следовательно, добавление нового класса:

.buffer {
    border-radius: inherit;
}

Как следствие, для других ситуаций вы можете сохранить использование переполнения: auto, если содержимое переполняет ваш frae, и вы хотите видеть все.