Радиус границы в процентах (%) и пикселях (px) или em


124

Если я использую значение в пикселях или em для border-radius, радиус края всегда представляет собой дугу окружности или форму таблетки, даже если значение больше, чем наибольшая сторона элемента.

Когда я использую проценты , радиус края является эллиптическим и начинается в середине каждой стороны элемента, что приводит к овалу или эллипсу :

радиус границы пикселя (px)процент (%) радиус границы

Значение пикселя для радиуса границы:

Процентное значение для радиуса границы:

Почему радиус границы в процентах не действует так же, как радиус границы, установленный с помощью значений пикселей или em?

Ответы:


181

Граница-радиус:

Во-первых, вам нужно понять, что свойство 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 пикселей.

Граница-радиус в пикселях (px) создает форму таблетки


В этом примере (с элементом фиксированного размера) вы можете получить тот же результат как с пикселями, так и с процентами. Как элемент 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>


6
Отличный ответ. Жаль, что процентные значения радиуса рассчитываются отдельно для ширины и высоты. Это означает, что я не могу получить круглые углы, которые масштабируются с размером объекта, не зная соотношения сторон объекта. Разве не было бы неплохо, если бы процентное соотношение применялось к большему из размеров объекта?
Крис Деннис

4
@ChrisDennis Это неправда. Как сказал OP, вы можете просто использовать border-radius: 999px;. Таким образом, вы получите круглые углы и будете уверены, что они масштабируются с
учетом

9
Но, возможно, мне не нужны полукруглые концы коробки. Я хотел бы иметь возможность указать x-радиус, скажем, 10% ширины коробки и y-радиус, равный x-radius.
Крис Деннис

4
Эй, вы писали другой такой пост? Буду признателен за их прочтение.
Ced

3
Но что на самом деле работает с процентами, так это: border-radius: 50%/100%(Проверено в Chrome 60 + 61)
denns

6

Просто разделите первое значение на желаемый% ... так что если вы хотите радиус границы 50%, напишите:

border-radius: 25%/50%; 

или другой пример:

border-radius: 15%/30%;

Вы можете легко выполнять математические вычисления в js или SASS.


1
Разве это не всего 25% ширины и 50% высоты? Это не то же самое, что 50% высоты по осям X и Y.
mpen

что это за синтаксис, черт возьми! оно работает! Я никогда не знал, что он существует, это здорово!
Ури Катнер,

Это просто математика, братан
CyberJ

1
Я не знаю, какой математикой вы занимались, но это не «просто математика». Это специально определенное сокращение для border-radius, которое не имеет ничего общего с арифметическим делением. w3.org/TR/css-backgrounds-3/#border-radius
М. И. Райт,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.