Пограничный радиус: 50% по сравнению с радиусом границы: 999em

Изучая удивительную разметку Medium, нашел интересный способ сделать красивые кнопки в стиле таблеток, используя граничный радиус: 999em. Однако это поставило вопрос: почему пограничный радиус: 50% делает овал вместо таблетки?

Вот живой пример: http://codepen.io/evergreenv/pen/ykpBA/

Codepen to illustrate border-radius:50% vs. border-radius:999em

+4
источник поделиться
3 ответа

Свойство радиуса границы делает все возможное, чтобы обеспечить одинаковое соотношение между общим радиусом, когда вы используете border-radius: 999em, он сохраняет те же пропорции наименьшего угла.

Но когда вы используете border-radius: 50%, он устанавливает границу в пропорции всего объекта, предполагая ось x для 50% ширины и y-оси для 50% высоты объекта, все углы объединены, чтобы они выглядели так, как если бы объект был круговым.

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

Примечание. В процентном отношении Safari для радиуса границы поддерживается только в 5.1+. В Opera поддерживается только в версии 11.5 +.

+5
источник

У вас есть прямоугольный div.

В A граничный радиус округляет каждый угол 50% от ширины/высоты div.

В B граница радиуса округляет каждый угол с одинаковой суммой (999em, только относительно размера шрифта).

+2
источник

Хорошо он делает овал, используя border-radius: 50%, потому что он подсчитывает границы элемента из направления x и y, что означает по ширине и высоте, и вы имеете ширину 120 пикселей и высоту 60 пикселей, поэтому он вычисляет, как эта граница, в направлении x означает 60px и на y его радиус 30px, и, объединив его, сделайте овал.

при применении css border-radius:100px он делает

border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;

чтобы получить форму таблеток.

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос