Граница-радиус:
Во-первых, вам нужно понять, что свойство border-radius принимает 2 значения. Эти значения представляют собой радиусы на оси X / Y четверти эллипса, определяющие форму угла.
Если установлено только одно из значений, второе значение равно первому. Так border-radius: x
эквивалентно border-radius:x/x;
.
Значения в процентах
Ссылаясь на спецификации W3C: CSS Backgrounds and Borders Module Level 3, border-radius вот что мы можем прочитать о процентных значениях:
Проценты: см. Соответствующий размер рамки.
Итак, border-radius:50%;
определяет радиус эллипса следующим образом:
- радиус по оси X составляет 50% ширины контейнера
- радиусы по оси Y составляют 50% от высоты контейнеров
Пиксель и другие единицы
Использование одного значения, отличного от процента, для радиуса границы (em, in, единицы измерения, связанные с окном просмотра, см ...) всегда приводит к эллипсу с одинаковыми радиусами X / Y. Другими словами, круг .
При установке border-radius:999px;
радиусы круга должны быть 999 пикселей. Но применяется другое правило, когда кривые перекрываются, уменьшая радиусы круга до половины размера наименьшей стороны. Итак, в вашем примере он равен половине высоты элемента: 50 пикселей.
В этом примере (с элементом фиксированного размера) вы можете получить тот же результат как с пикселями, так и с процентами. Как элемент 230px x 100px
, border-radius: 50%;
эквивалентен border-radius:115px/50px;
(50% с обеих сторон):
div {
display: inline-block;
background: teal;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
font-size: 0.8em;
color: #fff;
}
.percent {
border-radius: 50%;
}
.pixels {
border-radius: 115px/50px;
}
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>