Изучая удивительную разметку Medium, нашла интересный способ сделать красивые кнопки в стиле таблеток, используя граничный радиус: 999em. Однако это поставило вопрос: почему пограничный радиус: 50% делает овал вместо таблетки?Граница границы: 50% по сравнению с границей: 999em
Вот живой пример: http://codepen.io/evergreenv/pen/ykpBA/
Свойство радиуса границы делает все возможное, чтобы обеспечить равное соотношение между общим радиусом, когда вы используете border-radius: 999em, он сохраняет те же пропорции самого маленького угла.
Но когда вы используете border-radius: 50%, он устанавливает границу в пропорции всего объекта, предполагая ось x для 50% ширины и у-оси для 50% высоты объекта, всех углов в совокупности сделать это, как если бы объект был круговым.
Будьте осторожны, хотя с процентом в радиусе границы, так как он не поддерживается всеми браузерами, проверьте this link и this one.
Примечание: В процентах от значения Safari для радиуса границы поддерживается только в 5.1+. В Opera поддерживается только в 11.5+.
У вас есть прямоугольный DIV.
В A, радиус радиуса округляет каждый угол 50% от ширины/высоты div.
В B граница с радиусом округляет каждый угол с одинаковой суммой (999em, только относительно размера шрифта).
Ok это делает овал с помощью border-radius: 50%, потому что он считает границы элемента из й и у направления, что означает, по ширине и высоте, и вы имеете ширину 120px и высоту 60px так рассчитать, как эту границу на й направление 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;
так что вы получите форму таблетки.